How to set font size in css style

In CSS styles, you can use the "font-size" attribute to set the font size. Just set the "font-size: value;" style to the text element. The font-size attribute is used to set the font size. It actually sets the height of the character box in the font. The actual character glyph may be taller or shorter than the box (usually shorter).

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In css style, you can set the font size by setting the "font-size" attribute.

The font-size attribute can be used to set the font size of the text contained in the element. If an element does not explicitly define the font-size attribute, it will automatically inherit the calculation result of the font-size attribute of the parent element.

In fact, the font-size attribute sets the height of the character boxes in the font; the actual character glyph may be taller or shorter than these boxes (usually shorter).

When defining font-size, you can use predefined keywords, absolute size, and relative size:

1) Predefined keywords

Predefined The definition keywords are xx-small, x-small, small, medium, large, x-large, xx-large, and the sizes increase in order, similar to the size of clothes.

There are two major flaws in using predefined keywords: first, there are only 7 choices, and the range of choices is too small; second, just like the size of clothes, different manufacturers have different precise font sizes corresponding to each keyword. Values ​​may vary, resulting in text being sized differently in different browsers. Therefore, using predefined keywords to define font sizes is not recommended.

2) Absolute size

Absolute size includes px (pixel), pt (point, 1pt is equivalent to 1/72in), in (inch), cm (centimeter) ), mm (millimeters), etc. For example:

.px {
 font-size: 14px;
}
.pt {
 font-size: 10pt;
}
.in {
 font-size: .15in;
}
.cm {
 font-size: .4cm;
}
.mm {
 font-size: 4mm;
}

<p class="px">字体大小： 14px</p>
<p class="pt">字体大小： 10pt</p>
<p class="in">字体大小： .15in</p>
<p class="cm">字体大小： .4cm</p>
<p class="mm">字体大小： 4mm</p>

The above code defines 5 font sizes, all using absolute units. After using absolute length units, what is displayed is a fixed size on a monitor with a fixed resolution. The running result is as shown below:

If the font size is set in px, users using IE browser cannot set the "text size" on the browser. to enlarge or reduce the text. If the text is too small, it will affect reading and greatly reduce the user experience.

3) Relative size

Relative sizes include em, %, and rem. They are all font sizes relative to a certain reference base to calculate the current font size. , only the reference base is different. The reference base of

em is the parent element. So, how do you calculate the em value to specify? In fact, 1em is always equal to the value of the parent element's font-size attribute, which is how em works. Accordingly, the value of the percentage can be determined by the following formula:

Font size of the target element / Font size of the parent element = value

Therefore, when using em definition When sizing fonts, it's best to establish a baseline on the html or body element. Assume that the base size set in the body is 12px:

body {
 font-size: 12px;
}

If you want the font size of all paragraphs in the body to be 18px, according to the above formula:

18 / 12 = 1. 5

So, just set the font-size of the paragraph to 1.5em. This rule means that the font size of the paragraph text is 1.5 times the text size of the parent element:

The reference base of

body p {
 font-size: 1.5em;
}

% is also the parent element, and 100% is always equal to the value of the font-size attribute of the parent element, that is, 1em is equal to 100%. In other words, when using % to define the font size, you only need to convert the em value to the corresponding percentage. Therefore, the following two declarations will have the same result (assuming that the two paragraphs have the same parent element):

p.one {
 font-size: 1.5em;
}
p.one {
 font-size: 150%;
}

It should be noted that although font-size is inheritable, when using % and em When defining a font size, child elements inherit the calculated value rather than the % and em numbers. Moreover, % and em can also be accumulated. Consider the following code:

p {
 font-size: 12px;
}
em {
 font-size: 200%;
}
strong {
 font-size: 200%;
}

<p>12px <em> 200% <strong> 200% </strong></em></p>

In the above code, p is the parent element, em is the child element of p, and strong is the child element of em. The em element's base is the p element, while the strong element's base is the em element. The calculation results are as follows:

em：12 × 200% = 24px
strong：24 × 200% = 48px

The obtained running results are as shown in the figure below:

In this case of multi-layer nesting, if a certain calculation If the result is not an integer, the browser may round it up, and the child elements will inherit the rounded value. If the nesting is very deep, the font size of the underlying layer will deviate more and more from the actual calculated value. Also, since the reference base always changes with the element, the deeper the nesting, the more difficult it is to calculate.

In view of this, a new relative unit rem (abbreviation for root em) in CSS3 always uses the root element of the document (that is, the html element) as a reference to set the font size of other elements. That is, 1rem is equivalent to the value of the font-size attribute of the html element. Consider the following code:

html {
 font-size: 10px;
}
p {
 font-size: 1.4rem;
}

上述声明中，p 元素的字体大小将是 html 字体大小的1.4倍，则计算得到 p 元素的字体大小就是1.4 × 10px = 14px。

这样一来，无论嵌套多少层，参考基准始终不变，计算字体大小就变得容易多了。不过，需要注意的是，rem 是CSS3新增的一个相对单位，IE9 以下版本的老浏览器却不支持它，这也是很多编程人员尚未使用 rem 的原因。

在定义字体大小时，笔者建议在 html 元素中定义绝大多数元素所需要的字体大小，并让所有子元素继承 html 的字体大小。如果某个子元素需要要改变字体大小，则使用相对尺寸 em 或 % 或 rem 重新定义。

这样做的好处是，一方面，绝大多数元素都不必定义字体大小，减少不必要的定义；另一方面，如果完成所有的文字排版后，又要统一调整页面文字大小，就可以只修改 html 中的字体大小，其它所有文字的字体大小会自动变化，修改起来就很容易。

说明：

在某些特殊场景下，需要把 font-size 的值设置为0，来隐藏某些文本。但是，在IE6和IE7中，font-size: 0 的文本却变成了小黑点，并没有完全隐藏。

解决这个问题的最简单办法，就是在 font-size: 0 的同时，把 text-indent 属性设置为一个很大的负值，让这些文本显示在屏幕之外，自然就被隐藏起来。

（学习视频分享：css视频教程）

The above is the detailed content of How to set font size in css style. For more information, please follow other related articles on the PHP Chinese website!