我们专注于高端品牌网站建设

NEWS & BLOG

LATEST INFORMATION

NEWS

如何让浏览器支持字体小于12px的解决办法

从所周知, 很多浏览器,比如说谷歌默认最小字体为12px,小于12px的字体它都以12px显示,比如说你对某个类的文字大小设置为10PX,它依旧显示的是12PX,具体效果见下图。但是在开发的时候,可能有需要用到比12更小的文字,那怎么办呢?有什么办法来处理?



      IE等浏览器效果如下:

1.jpg


      Chrome浏览器下的效果:

2.jpg




      在网上有一个方法就是在html或者body里添加一句谷歌浏览器专有的属性。



      可是我用了之后发现并没有什么用,原来在新版本的谷歌浏览器里已经无效。那么我们现在应该怎么办呢?


      我们可以使用CSS3的一个缩放属性:transform:scale(),我这里给最后一行设置的代码如下(倒数第二行不做任何其他设置,以做参考):

-webkit-transform:scale(0.833);
/*这个数字0.833,是缩放比例,可以根据你自己的情况不同而不同。*/

4.jpg

      从上图可以看到最后一行是变小了,但是左边却出现了留白。是因为做缩放处理的时候把宽度也缩放了。还有要注意一点,如果这个<p>元素有背景的话,也会使背景也随着变化,所以,我们通常的做法是给<p>标签里再套个一个标签,我这里用<span>标签。


<p>xjun0812测试16像素</p>

<p>xjun0812测试14像素</p>

<p>xjun0812测试12像素</p>

<p>xjun0812测试10像素</p>

<p><span>xjun0812测试10像素</span></p>


      你会发现现在反而没有效果了,如图:


5.jpg

      这是因为transform:scale()这个属性只为可以缩放可以定义宽高的元素,而span是行内元素;我们给span元素定义一个display:block,这样就可以了。


      我们会发现一个问题,不管span元素是否左浮动,还是会发现左边出现了留白,我们可以通过设置宽度等其他办法来解决,结果如下:

6.jpg



本文标签:
聚合标签: 网页设计 深圳网站建设 深圳网站制作 龙华网站建设 网站制作公司 深圳网络推广 网站建设 SEO优化 SEO排名 网络营销 网络推广 深圳seo SEO 网站制作 高端网站建设 左岸视觉 seo 关键词优化 新手做网站 网页创意 佐岸视觉 深圳网页设计 电商网站开发 深圳电商网站制作 品牌网站设计 seo优化 网络优化 网站推广 网站开发 网站设计 网站教程 pbootcms pbootcms手册 PbootCMS 模板标签 网站模板 网站开发 深圳高端网站制作 深圳建网站公司 网站建设方案 模板制作 龙华网站建设 深圳网站开发 网站建设 网页设计 模板下载 龙岗网站建设 深圳外贸网站建设 龙华网页设计 深圳建设 深圳网站建设 模板开发 小程序 龙华网站制作 龙华网络公司 龙华网站设计 网站建设推广 响应式网站建设 电商网站建设 大型网站建设 TP5视频教学 网站开发教程 龙岗网站制作 龙岗网页设计 龙岗网络公司 eyoucms 深圳网站定制 网站建设技术 品牌型网站建设 seo优化 网络推广 Bootstrap 兄弟连 Bootstrap视频教程 织梦 织梦仿站教程 dedecms织梦安全防护 公司网站设计 模板网站 童攀 TP5教学视频 公司网站建设方案 广州建设网站 网站建设模板 龙岗网站设计 深圳seo 网站推广 ajax 免费网站建设 杭州网站建设 集团公司网站建设 swiper冲突 深圳企业网站建设 龙华网站建设公司 网站制作流程 Photoshop教程 Photoshop视频教学 seo 深圳网站建站 手机网站 深圳市网站设计 深圳建设网 网站建设报价 前端开发 网站设计 网站建设企业 深圳罗湖网站建设 模板网站建设 bootstrap教程 响应式开发教程 div+css 网站维护 网站建设广告 企业网站建设流程 广州市网站建设 外贸网站 网站建设哪家好 深圳企业网站制作公司 深圳网站开发公司 深圳网页制作公司 网站的建设