1. font-family
Function: used to change the font of HTML labels or elements. You can set a list of available fonts. The browser selects fonts from front to back.
Syntax: {font-family: font 1, font 2,..., font n}
Example:
Font
2. font-style
Function: displays text in italic, italic, or italic.
Value:
Normal-normal
Italic-italic
Oblique-Italic
Example:
Normal
Italic
Oblique
3. font-variant
Function: switches between normal and small uppercase letters.
Value: normal-if the flag inherits the small-caps setting of the parent element, the keyword normal sets font-variant to the normal font.
Small-caps-display lowercase letters as uppercase letters with smaller fonts.
Example:
FONT-VARIANT
4. font-weight
Function: used to set the font gray scale to generate the font's deep and light versions.
Value:
Normal grayscale-normal
Relatively gray-bold, bolder, light, and lighter
Gradient grayscale-values: 100,200,300,400 (equivalent to normal), 500,600,700 (equivalent to bold), and 800,900.
Example:
Font grayscale
5. font-size
Function: Controls the text font size with various measurement units.
Value: There are four numerical methods
Absolute size-use a specific font size table to define the font size. You can take one of the following values: xx-small, x-small, small, medium, large, x-large, and xx-large. Different fonts have different numbers.
Relative Dimensions-larger and smaller are relative to the font size of the parent container.
Length-in millimeters (mm), centimeters (cm), inches (in), points (pt), pixels (px), pica (pc ), ex (the height of lowercase letter x) or em (the font height) as the unit of measurement.
Percentage-the percentage of the font size of the parent element.
Example: Font size
6. font
Function: short for Attribute. It provides a shortcut for setting all attributes of a font.
Syntax: {font: font attribute 1 font attribute 2... font attribute n}
Numeric value: the font property value is the value listed above. You can also set the line-height attribute (see text attribute) for the line spacing attribute. The content sequence is: font-style; font-variant; font-weight; font-size; line-height; font-family. Some attributes can be omitted. Attribute values are separated by spaces.