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

Today, the editor will share with you the relevant knowledge points about how to use the font-size attribute in CSS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Detailed explanation of CSS attribute font-size

CSS font style settings, I believe many people are familiar with, in fact, font style settings are not limited to our usual few properties, this article describes the detailed properties of font-size font style settings for you.

At first glance, CSS font setting is easy, but it's not true. We engineers use all our strength to resize fonts in different browsers and get the right results. In fact, a little in-depth understanding can make a big difference.

Font-size attribute:

The font-size attribute can be set to any HTML tag, even if it does not contain text, for example, it can be assigned to a variety of drops, such as absolute, relative, length values

The font-size attribute of an element automatically inherits the font-size attribute value of its parent node element, unless you override it. This is important when you set the relative size of the font-size.

Absolute keywords set by font-size:

The following absolute font size settings are valid. Of course, they are predefined by the browser. When the absolute keyword font-size is assigned to an element, the element does not inherit the font size of the parent element.

Font-size:xx-small; font-size:x-small; font-size:small; font-size:medium; font-size:large; font-size:x-large; font-size:xx-large

Although most browsers support the above keywords, their exact sizes are different.

Absolute size of font-size

Fone-size can be set to the following absolute size:

Mm: mm, for example: 10mm.

Cm: cm, for example: 1cm (= 10mm).

In: inch (inch), for example: 0.39in (~ = 10mm).

Pt:point (dot), 1pt is equivalent to 1pm 72 inches, for example: 12pt.

Pc:pica (12:00 movable type), 1pc is 12pt

Px:pixel (pixels), for example: 14px.

Generally speaking, there are some problems with the above measurement units. For example: millimeters, centimeters, inches are not accurate for different media, due to different resolution settings, pt and pc are relatively unreliable. Pix is the most appropriate, but it can cause some ancillary problems: fonts cannot be resized under IE.

Relative size of font-size:

The font-size property is set to a relative size relative to the font size of the parent node.

Em:1em is a font that is twice the size of the current font. 2em is a font that is twice the size of the current font.

%: 100% is equivalent to the current font size, 200% is equivalent to 2 times the font size.

Ex:1ex is the same size as the height value of the letter'x'in the current font.

Few developers use ex, but ex is actually quite easy to use in some cases, such as when you need a more precise font size, 1ex is better and more accurate than 0.525em.

The value of% is equivalent to that of em, for example: 50%, 0.5, 100, 120, 120, 1.2, and so on. Although there are few browsers with subtle differences, it is a rare problem after all. If you want to save smaller bytes, you need to define the value of font-size with a shorter name. For example, 50% takes up fewer bytes than 0.5em, and 1em takes up less bytes than 100%.

Text font size and page scaling

This is an additional complex in-depth section, and most browsers allow users to do the following in the browser:

◆ increases or decreases the basic font size (except for pictures)

Page scaling means that all text and pictures are scaled and changed accordingly.

Allows not only font scaling, but also page scaling

Note (in depth): in ie, if the font of an element in the page is assigned with px (pixels), the font of that element will not change when the page is zoomed out.

If you are a designer with a background in the printing industry and are about to move to web, it is recommended that you do not give users too much rights or they will disrupt your design work. When your design is enlarged to 200%, or the font is reduced to 50%, it will be destroyed.

◆ CSS Font-size setup recommendations (specification)

In general, em or% is used in most cases so that fonts can be supported by browsers with finer proportions. I personally recommend using the percentage% to define the font-size size, which is also better supported in some older browsers.

These are all the contents of this article entitled "how to use font-size attributes in CSS". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.