Graphic CSS (5): font-font

Fontfont-familyfont-sizefont-weightfont-stylefont-variant in addition, font-size-adjust and font-stretch have been removed from CSS 2.1 and will no longer be learned.

  
 

Font-family (specified font ):

If the subject name contains spaces or other special characters, use quotation marks (double quotation marks or single quotation marks ):

You can specify multiple fonts (separated by commas) at the same time. The former takes precedence over the missing fonts, and then uses the default one.

Font-size (font size): XX-small, X-small, small, medium, large, X-large, and XX-large:

Inherit, smaller, and larger ):

Custom size (using PX and other units) and percentage:

Font-weight (bold): 100-900, normal (default), bold (BOLD), bolder (rough), lighter (fine ).

A bold font is enough for a large number of parameters.

Font-style (italic setting): normal (default), italic (italic), oblique (italic ).

Italic and oblique are different, but most fonts are not supported. Even if fonts support browsers, they are not necessarily supported. They are all italics.

Font-variant: normal (default), small-caps (show lowercase letters as small uppercase letters ):

You can use font to set the above attributes in a general order:
Font-style, font-variant, font-weight, font-size/line-height, font-family.

It can be omitted, and the sequence can also be flexible, but it seems that the font-size and font-family can only be in this order;
Each element is separated by space, and the font (if multiple) is separated by commas. It is more convenient to use this method to specify the Row Height (separated by/) when setting the font size ).

In this case, we can use: Font: italic; instead of font-style: italic; Font: Small-caps; instead of font-variant: Small-caps; Font: bold; replace font-weight: bold; Font: 16px; replace font-size: 16px; Font: 16px/32px; replace font-size: 16px/32px; but unfortunately: you cannot use font: Arial; instead of font-family: Arial; (test with IE)

  
 

Font can also directly apply the font attributes of known objects on the browser, for example:
Caption, small-caption, menu, icon, status-bar, message-box.