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;