CSS font size in different browser compatibility issues

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