cssにおけるフォントサイズの異なるブラウザでの互換性の問題

cssではfont-sizeを使用してフォントサイズを設定し、ブラウザによってフォントheightは同じですが、widthは異なります.例えば、火狐やグーグルではfont-size:20 pxでフォントの高さは20 pxになりますが、グーグルのフォント幅は火狐より長いです.
一、解決方法は以下の通りである.
1、ブラウザの基準番号を62.5%、つまり10 pxに設定し、現在1 rem=10 px--計算の便利さのため.次にbodyにfont-size:2 rem;を適用し、では、bodyのフォントサイズは20 pxです.

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で12 px未満のフォントを設定し、12 pxのまま表示します.

-webkit-text-size-adjust:none;