If you change the font type, the font size will change. How can you change the font type and keep the font size the same?

  css3, question

The problem is this:
There is a passage,< p > who am I? </p>
Then I set different font types to suit different clients, but when switching font types, the font size will change.
What should I do if I want to keep the font size the same when changing font types?

<style type="text/css">
 p{
 font-size: 16px;
 }
 p#line1{
 font-family: Arial;
 }
 p#line2{
 font-family: Times;
 }
 p#line3{
 font-family: Comic;
 }
 </style>
< p id="line1 "> Chinese: same;  English is different: It's raining</p >
 < p id="line2 "> Chinese: same;  English is different: It's raining</p >
 < p id="line3 "> Chinese: same;  English is different: It's raining</p >

图片描述

It’s easy to have a diagram and code. Here’s the thing:

  1. The three fonts in the code you gave are all English fonts, so the browser only hit English when parsing, so only English fonts were changed (the third one seems to have some problems, I don’t know whether the font name is wrong or other reasons, and the English is obviously the English part of the Chinese-English font [which is the default font for Windows system]. ), the Chinese font shows the default font because there are no relevant characters in the specified English font, that is, the system’s own Chinese and easy-to-write style.

  2. As far as the first two English fonts are concerned, the former is sans-serif and the latter is serif. the obvious difference between the two is that there are “serifs” at both ends of the stroke of seri f (for example, “I” in your screenshot, the first is a smooth line and the second is “footed”. the two fonts are different in classification, and the design must also make fine adjustments in spacing. In addition, some fonts will have corresponding adjustments (usually called hint) on some commonly used even font sizes (such as 14px and 16px), and the results will be quite different.

  3. I don’t know what your specific requirements for changing fonts are. Generally speaking, for different end users, they are more inclined to change to non-liner body which is more common on this end (liner body is usually more suitable to be used as artistic body f or occasions requiring emphasis such as titles, but this depends on the design). As there is no fonts on the mobile end, the mobile end uses its own basic style.


It is not clear what your specific adaptation rules are. Generally, you can write a string of font names in font-family. The browser will adapt from front to back until the one with the font is found. Unless you use Internet fonts, there is generally no need for js.