css中字体大小在不同浏览器兼容性问题——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
css中字体大小在不同浏览器兼容性问题

发布作者:萧强   发布时间:2015-09-11   阅读次数:17539

css中使用font-size设定字体大小,不同浏览器的字体height一样,但是width不同,比如在火狐和谷歌中,font-size:20px,字体的高度变为20px,但是谷歌的字体宽度比火狐长。这是为什么?


一,大致解决方法是这样的

1、 将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem = 10px —— 为了计算方便。然后 在 body上应用 font-size: 2rem;,那么现在body的字体大小就是 20px。

 
html { font-size: 62.5%; }
 body { font-size: 2rem; /* =20px */ }
2、 webkit浏览器渲染出来的字体具有一定的平滑效果,所以我们会看到 chrome 渲染出来的字体要大一点并且宽一点,我们可以通过下边的方法来关闭;
 
body { 
-webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; 
} 
启用浏览器的默认平滑字体效果css:
 
body {
 -webkit-font-smoothing: subpixel-antialiased;
 -moz-osx-font-smoothing: auto; 
}

Chrome下,设置小于12px字体,显示仍为12px,

先解决了问题再说!
解决办法加入下列样式:
-webkit-text-size-adjust:none;

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

浏览器解决兼容方案

热点文章

新闻资讯

标签云

友情赞助