首页 > 代码库 > 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中字体大小在不同浏览器兼容性问题