Shulou(Shulou.com)05/31 Report--

In this article Xiaobian introduces in detail "how to set font size in css style", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to set font size in css style" can help you solve your doubts.

In css styles, you can use the "font-size" attribute to set the font size, simply by setting the "font-size: value;" style for the text element. The font-size property is used to set the font size, which actually sets the height of the character box in the font, whose actual character glyphs may be taller or shorter (usually shorter).

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

In css styles, you can set the font size by setting the "font-size" property.

You can set the font size of the text contained in the element through the font-size property. If an element does not explicitly define the font-size attribute, it automatically inherits the calculated result of the parent element's font-size attribute.

The font-size property actually sets the height of the character boxes in the font; the actual character glyphs may be taller or shorter (usually shorter) than these boxes.

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

1) predefined keywords

The predefined keywords are xx-small, x-small, small, medium, large, x-large, xx-large, and the size increases sequentially, similar to the size of clothes.

There are two major defects in using predefined keywords: one is that there are only seven options, and the range of choices is too small; second, like the size of clothes, different manufacturers may have different exact values for the font size corresponding to each keyword, resulting in different browsers. The size of the text may be different. Therefore, it is not recommended to use predefined keywords to define the font size.

2) absolute size

Absolute sizes include px (pixels), pt (dots, 1pt equals 1/72in), in (inches), cm (centimeters), mm (millimeters), and so on. Such as:

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

Font size: 10pt

Font size: .15in

Font size: .4 cm

Font size: 4mm

The above code defines five font sizes, all in absolute units. After using the absolute length unit, under the fixed resolution display, what is displayed is the fixed size.

If you set the font size in px, users of the IE browser will not be able to zoom in or out the text by setting the text size on the browser. If the text is too small, it will affect reading and greatly reduce the user experience.

3) relative size

The relative sizes are em,%, and rem, which are all relative to the font size of a reference to calculate the current font size, but the reference is different.

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

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

Therefore, when using em to define font size, it is best to establish a benchmark on the html or body element. Suppose the base size set in body is 12px:

Body {font-size: 12px;}

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

18 / 12 = 1. 5

Therefore, simply set the font-size of the paragraph to 1.5em, which means that the font size of the paragraph text is 1.5 times the size of the parent element text:

Body p {font-size: 1.5em;}

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

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

It is important to note that although font-size is inheritable, when using% and em to define font size, the child element inherits the value of the calculated result, not the number of% and em. Also,% and em can be accumulated. Consider the following code:

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

12px 200% 200%

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 base of the em element is the p element, while the base of the strong element is the em element. The calculated results are as follows:

Em:12 × 200% = 24pxstrong:24 × 200% = 48px

In this case of multi-layer nesting, if a calculation is not an integer, the browser may round it, and the child elements may inherit the rounded value. If the nesting is deep, the font size of the lower layer will more and more deviate from the actual calculated value. And, because the reference 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 (short for root em) in CSS3 always sets the font size of other elements based on the root element of the document (that is, the html element), 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.4remt;}

In the above statement, the font size of the p element will be 1.4 times the html font size, and the font size of the p element will be calculated to be 1.4 × 10px = 14px.

In this way, no matter how many layers are nested, the reference remains the same, making it much easier to calculate the font size. It is important to note, however, that rem is a new relative unit for CSS3, but older browsers below IE9 do not support it, which is why many programmers have not yet used rem.

When defining font size, the author recommends that you define the font size required by most elements in the html element, and let all child elements inherit the font size of html. If a child element needs to change the font size, use the relative size em or% or rem to redefine it.

The advantage of this is that, on the one hand, the vast majority of elements do not have to define the font size, reducing unnecessary definitions; on the other hand, if you want to adjust the page text size uniformly after completing all the text typesetting, you can only modify the font size in html, and the font size of all other text will change automatically and it is easy to modify.

Description:

In some special scenarios, you need to set the value of font-size to 0 to hide some text. However, in IE6 and IE7, the text of font-size: 0 becomes a small black dot and is not completely hidden.

The easiest way to solve this problem is to set the text-indent property to a large negative value while font-size: 0, so that the text is displayed off the screen and is naturally hidden.

After reading this, the article "how to set font size in css style" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.