css3 - CSS字体设置的几个问题？

Question

问题描述

查看框架代码的时候，发现了几处对字体设置的代码，请帮忙解答其作用。

1.代码段中font-size: 62.5%;的作用？

html {
  font-size: 62.5%;  /*1*/
}

2.代码段中font:12px/1.5的作用？
3.代码段中\5b8b\4f53的作用？
4.代码段中font-size:1.2rem的作用？

body {
    font:12px/1.5 tahoma,arial,simsun,sans-serif,\5b8b\4f53;  /*2,3*/
    font-size:1.2rem;  /*4*/
}

5.代码段中font-size:100%的作用？

input,button,textarea,select,label {
    font-size:100%; /*5*/
}

Answer 1

• font-size: 62.5%;
  The default font size of the browser is 16px. To facilitate calculation, the font size of the top-level html element is set to 16 * 62.5% = 10px.
• font:12px/1.5 and font-size:1.2rem;
  Set the font size under body to 1.2rem = 10px * 1.2 = 12px and the line height to 1.5 times the font size.
• 5b8b4f53
  It is the unicode encoding of 宋体. (Reference: Chinese font encoding comparison table)
• font-size:100%
  of form In the browser's default settings, the font size of the form control is smaller than that of ordinary text by default. Here, the browser's default style is overridden.

Answer 2

1. The role of font-size: 62.5%; in the code segment

1. Basic introduction

1. “Ems”: em The size is not fixed and becomes a relative unit (body is relative to the browser's default font setting, and the subset is relative to the parent). The browser's default font size is 16px, so 1em = 16px, and it is expandable ( 2em = 32px), the currently commonly used font size px converted to em:

   16px = 1em; 
   14px = 0.875em; 
   12px = 0.75em; 
   10px = 0.625em;
   

2. “Pixels”: px The size is fixed, called absolute units, and has poor accessibility on mobile terminals

3. “Points”: pt The size is fixed and is an absolute unit, suitable for printing and print media
4. “Percent”: % is similar to em, expressed in percent, then the current font size is 100%. Use % to set the font, and your page font will also have good accessibility on mobile devices

2. Relationship

Generally, 1em=12pt=16px=100%, the following example assumes that the basic font size is set in the body.

Relative units em and % will change as the base font size changes, while pt and px will not change, which is why em and % are chosen to set the font of the web document text (which Mobile accessibility is also very good).

3. Conversion of em and %, em and px

em features:

1. The value of em is not fixed
2. em will inherit the font size of the parent element

Rewriting steps:

1. Declare Font-size:62.5% in the body selector;

2. Divide your original px value by 10 and replace it with em as the unit;

   If only the above two steps were needed to solve the problem, probably no one would use px. After the above two steps, you will find that the font size of your website is unexpectedly large. Because the value of em is not fixed and will inherit the size of the parent element, you may set the font size in the content p to 1.2em, which is 12px. Then you set the font size of selector p to 1.2em, but if p belongs to a child of content, the font size of p is not 12px, but 1.2em= 1.2 * 12px=14.4px. This is because the font size of content is set to 1.2em. This em value inherits the size of its parent element body, which is 16px * 62.5% * 1.2=12px,, and p as its child, em inherits the font height of content, which is 12px. So 1.2em of p is no longer 12px, but 14.4px.

3. Recalculate the em values ​​of enlarged fonts. Avoid repeated declarations of font size, that is, avoid the 1.2 * 1.2= 1.44 phenomenon mentioned above. For example, if you declare the font size to be 1.2em in #main, then when you declare the font size of p, it can only be 1em, not 1.2em, because this em is not that em, and it inherits the font height of #content. It became 1em=12px.

Weird 1 2px Chinese characters: A strange phenomenon will be discovered when completing the em conversion, that is, the 12px (1.2em) Chinese characters obtained by the above method are not equal to the font size directly defined by 12px in IE. But slightly larger. I have solved this problem. You only need to replace 62.5% with 63% in the body selector and it will display normally.

2. What is the role of font:12px/1.5 in the code snippet?

font: 12px;
line-height: 1.5;

3. What is the role of 5b8b4f53 in the code snippet?

font:12px/1.5 tahoma,arial,simsun,sans-serif,b8bf53;

This is the abbreviation of font in css.

Font: font size/font line height font format.

"5b8b4f53" is "Songli". Use unicode instead of SimSun because some versions of Firefox and Opera do not support the SimSun writing method.
Garbled comments: It is strongly recommended not to use Chinese comments, such as font-family:'宋体'

For everyone’s convenience, we have compiled some Chinese names in Unicode:

字体名称	Unicode
新细明体	65B07EC6660E4F53
细明体	7EC6660E4F53
标楷体	680769774F53
黑体	9ED14F53
宋体	5B8B4F53
新宋体	65B05B8B4F53
仿宋	4EFF5B8B
楷体	69774F53
仿宋_GB2312	4EFF5B8B_GB2312
楷体_GB2312	69774F53_GB2312
微软正黑体	5FAEx8F6F6B639ED14F53
微软雅黑	5FAE8F6F96C59ED1

4. What is the role of font-size:1.2rem in the code snippet?

Reference answer 1

5. What is the role of font-size:100% in the code snippet?

Reference answer 1

Answer 3

1 and 5: font-size:100%
It is the default font size, 62.5% is 62.5% of the default font size

2: font:12px/1.5; 12px font size, 1.5 times line-height

3:5b8b4f53 Song Dynasty encoding

4: rem is calculated based on the html root element. html,body{font-size:20px;} then 1rem is 20px, 2rem is 40px