首页 > 代码库 > css中字体大小在不同浏览器兼容性问题
css中字体大小在不同浏览器兼容性问题
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;
css中字体大小在不同浏览器兼容性问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。