CSS in the use of font-size set font size, different browser font height, but different width, such as in Firefox and Google, font-size:20px, font height to 20px, but Google's font width than Firefox long
One, the workaround is as follows:
1, set the browser's base font size to 62.5%, that is, 10px, now 1rem = 10px--for calculation convenience. Then apply Font-size:2rem on the body, and now the body font size is 20px.
{ font-size: 62.5%;} { font-size: 2rem/** /}
2, WebKit browser rendered font has a certain smoothing effect, so we will see Chrome rendered font to be larger and wider, you can add the following:
{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale
Enable browser's default smooth font effect CSS:
{ -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; }
Set chrome below, set less than 12px font, display still 12px
-webkit-text-size-adjust:none;
CSS font size in different browser compatibility issues