css--fonts

Universal Font Family

5 Types of universal font families defined in CSS

Example: Specifying a universal font family

        {            font-family:sans-serif; /* If you want the document to use a Sans-serif font and don't care about which particular font it is, the user agent chooses a font from the Ans-serif font family to apply it to the BODY element */        }

        {            font-family: georgia,serif/* if the Georgia font is not available, use a different serif font * /        } {font-family: Times , ' Times New Roman ', Georgia,serif;                       /* in order, specify a generic font name to be safe */            * only if there is one or more spaces in a word name or if the font name includes # or $ symbols, you need to enclose the font-family declaration in quotation marks */        }

Font-weight How does font bold work?

The font specifies a level 9 bold, which is 100~900, where 400 is defined as equivalent to normal,700 corresponding to bold, and the other numbers do not correspond to any other values of font-weight, although they may correspond to the common morph names. The rules are as follows

To illustrate:

Style and distortion of fonts

The values for Font-style can be: italic, oblique, normal, inherit

Normal: Non-italic and italic fonts

Oblique: An oblique version of normal vertical text

Italic: Italic is a separate font style that has minor changes to the structure of each letter to reflect the changing appearance

CSS font-related points of fragmentation

        {            font-variant:small-caps; /* Small Capital letters */             font-stretch:wider; /* This property is used to make a font character fatter or thinner */             font-size-adjust:0.58; /* make the font guaranteed to be recognizable */        }

Font Property

The first three values of the font are Font-style, font-weight, and Font-variant, and the last two values are font-size and font-family, where the first three values are allowed in any order or can be omitted arbitrarily. The latter two values must be font-size before, font-family as the last two values in the declaration, and both values must be in the font declaration.

It is also worth mentioning that the row height can be increased in the Font property, as shown below

Let's look at one more example:

The CSS above is actually equivalent to the following CSS

Because the ignored value is reset to its default value, because it will also cause it to overwrite the Inherit property, you should be careful when using the font abbreviation property.

Using System fonts

Div{Font:caption;/*control of the header*/Font:icon;/*icon Tagging*/Font:Menu;/*Menu*/Font:Message-box;/*dialog Box*/Font:Small-caps;/*Small controls tagged*/Font:Status-bar;/*Window status bar*/}

css--fonts