CSS font family

Document directory

• CSS font family

Chaotic CSS font family font naming

Setting font attributes is one of the most common purposes of a style sheet. However, despite the importance of font selection, there is currently no way to ensure consistent use of fonts on the web, because there is no uniform way to describe fonts and fonts.

For example, the fonts "Times", "Times New Roman", and "timesnr" may be very similar or even identical. But how can the user agent know this? The Creator may specify the font as timesnr in a document. But if the font is not installed on the user's machine, what does the user view the document? Even if Times New Roman is installed, the user agent does not know that the two fonts (Times New Roman and timesnr) are actually interchangeable. If you want a browser to use a certain font, don't think about it.

Compared with the text processing software, CSS does not provide more final control over the font. For example, when loading a Microsoft Office document you created, the display may depend on the font that you have installed. If the installed font is different from your font, the document looks very different. This is also true for documents designed with CSS.

In case of various complicated font deformation, such as bold or italic text, the font naming problem is even more confusing. Most people know that italic text looks like a lot, but few people can explain the difference between it and italic text, or even the difference between them.

Slanted is not the only alias for italic-style text. For example, you may also see the words oblique, incline (or inclined), cursive, and kursiv waiting. Therefore, one font may have a timesitalic deformation, while the other may use georgiaoblique as the deformation. Although these two fonts are actually equivalent to the "italic form" of the times and Georgia fonts, their "names" are very different. Similarly, the font deformation words bold, black, and heavy may indicate the same meaning or different.

General font family

As discussed above, in fact, the same font may have many different titles, but CSS has taken a brave step, trying to help the User Agent understand this confusion.

In our opinion, the "font" may be composed of many font variants, which are used to describe bold and italic texts respectively. For example, you may already be familiar with the font Times. However, times is actually a combination of various variants, including timesregular, timesbold, timesitalic, timesoblique, timesbolditalic, timesboldoblique, and so on. Each type of deformation of times is a specific font face, and we usually think of times as a combination of all these deformation fonts. In other words, times is actually a font family, not just a single font, although most of us think that font is a certain font.

In addition to a variety of specific font families (such as times, verdana, Helvetica, or Arial), CSS also defines five general font families:

Serif font

These fonts are proportional to each other, and there are upper and lower short lines. If all characters in the font have different widths based on their different sizes, the character is proportional. For example, the width of lowercase I and lowercase m is different. Upper and Lower short lines are the decoration of the stroke ends of each character, such as the short lines at the top and bottom of lower case l, or the short lines at the bottom of upper case A and lower case. Examples of serif fonts include times, Georgia, and new century schoolbook.

Sans-serif font

These fonts are proportional, and there is no short-term. Examples of sans-serif fonts include Helvetica, Geneva, verdana, Arial, or Univers.

Monospace font

The monospace font is not proportional. They are usually used to simulate the output of text typed by typewriters, old-fashioned dot matrix printers, and even older video display terminals. With these fonts, the width of each character must be identical, so the lower-case I and lower-case m have the same width. These fonts may be up or down or not. If the character width of a font is the same, it is classified as a monospace font, regardless of whether there is a short line or not. Examples of monospace fonts include courier, Courier New, and Andale mono.

Cursive font

These fonts try to mimic human handwriting. Generally, they are mainly composed of curves and strokes that are not in the serif font. For example, capital A may have a small bend at the bottom of its left leg, or it may be completely composed of a floral part and a small curved part. Examples of the cursive font include zafc chancery, author, And Comic Sans.

Fantasy font

These fonts cannot be defined by any feature. The only difference is that we cannot easily plan them into any other font family. Such fonts include Western, woodblock, and Klingon.

Theoretically, any font series installed by the user will fall into the above generic series, but this may not actually be the case, but there are few exceptions (if any.