CSS Grammar Manual (i) Font properties

css| Syntax

1, font-family

function : To change the font of HTML flags or elements, you can set up a list of available fonts. Browsers select fonts from front to back.
syntax : {font-family: Font 1, Font 2, ..., Font n}
Example :

Font

2, Font-style

function : Make the text appear as flat italic or italic, etc. emphasize.
value :
Normal.
Italic-Italic
Oblique-Oblique body
Example :

Normal

Italic

Oblique

3, Font-variant

function : lets you switch between normal and small capital letter fonts.
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-Displays lowercase letters as uppercase letters with smaller fonts.
Example :

font-variant

4, Font-weight

features : Used to set the font grayscale, to generate a deep, shallow version of the font.
value :
Normal grayscale
Relative grayscale-Bold, bolder, light, lighter
Gradient grayscale-values are as follows: 100, 200, 300, 400 (equivalent to normal), 500, 600, 700 (equivalent to bold), 800, 900.
Example :

Font Grayscale

5, Font-size

functions : Controls the font size of text in a variety of units of measure.
number : There are four numerical methods
Absolute dimensions-Defines the font size with a specific size table and can take one of the following values: Xx-small, X-small, small, medium, large, X-large, Xx-large. Different fonts have different values.
Relative dimensions-larger, smaller, resulting in dimensions that are relative to the size of the parent container.
Length-in millimeters (mm), cm (cm), inches (in), Points (PT), pixels (px), Pica (PC), ex (height of lowercase letter x), or em (font height) as units of measure.
Percent-the percentage of the font size relative to its parent element.
Example : small font size

6, Font

features : Shorthand properties that provide a quick way to set all properties of a font.
syntax : {font: Font Property 1 Font Property 2 ... Font Properties N}
Value: The Font property value is the previously listed value, and you can also set the Line Spacing property line-height (see Text property), in the order of the contents: Font-style; Font-variant; Font-weight; Font-size; Line-height; Font-family. You can omit some properties and separate the property values by a space.
Example :

FONT