A compendium of CSS manuals: Font properties

Css

CSS Properties:

5. Font Properties:

This defines the various properties of the font.

The font-family property defines the name of the font, either a font name or a font name, and the name of the font must be exactly the same as in the computer system:

Property name : ' font-family '
Property value : [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Initial value : based on user definition
Fit Objects : all elements
Whether to inherit : Yes
Percent remark : prohibited

In some computer systems, if you do not have the font required by the style sheet, you can set a second font in case. For example:

Body {Font-family:baskerville, "Heisi mincho W3", Symbol, serif}

Family-name refers to a certain font, such as heisi Mincho W3,generic-family refers to a certain type of font, such as serif.

The Font-style property Describes how the font is tilted:

Property name : ' Font-style '
Property value : normal | italic | oblique
Initial value : normal
Fit Objects : all elements
Whether to inherit : Yes
Percent remark : prohibited

font-variant Properties:

Property name : ' Font-variant '
Property value : normal | small-caps
Initial value : normal
Fit Objects : all elements
Whether to inherit : Yes
Percent remark : prohibited

A lowercase letter in an element that uses the Small-caps property looks smaller than a normal uppercase letter.

The font-weight attribute is used to describe the word weight.

Property name : ' Font-weight '
Property value : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial value : normal
Fit Objects : all elements
Whether to inherit : Yes
Percent remark : prohibited

The 900 stands for 9 different characters, representing normal, and the bold, 900 is the heaviest font,bolder or lighter indicates that the character of the font is higher or lower than the parent element, such as the parent element Word weight, then the bolder represents the word weight If the parent element itself is 900, then the word weight or 900, the same lighter is the same as the bolder . Some fonts do not have a 900 so full weight, perhaps from the number to the M , then the weight of the minimum and maximum value is also to . For example:

P {Font-weight:normal}/* 400 * *
H1 {font-weight:700}/* Bold * *

The font-size property describes the size of the font:

Property name : ' Font-size '
Property values : <absolute-size> | <relative-size> | <length> | <percentage>
Initial value : Medium
Fit Objects : all elements
Whether to inherit : Yes
Percent Note : relative to parent element ' s font size

This property can use absolute size, or it can use relative size, where absolute size can be used, as the following keyword indicates:

Xx-small | x-small | small | medium | large | X-large | The xx-large represent the smallest, smaller, smaller, medium, large, large, and largest respectively. Relative size can be used:larger or smaller description. For example:

P {font-size:12pt;}
BLOCKQUOTE {Font-size:larger}
EM {font-size:150%}
EM {font-size:1.5em}

The Font property is a shortcut to the above property, and the properties are as follows:

Property name : ' Font '
Property value : [[< ' Font-style ' > | | < ' font-variant ' > | | | < ' font-weight ' >]? < ' font-size ' > [/< ' line- Height ' >]? < ' font-family ' >]
Fit Objects : all elements
Whether to inherit : Yes
Percent Note : only used in font-size

For example:

p {font:12pt/14pt Sans-serif} p {font:80% Sans-serif}
P {font:x-large/110% "New Century Schoolbook", serif}
P {font:bold italic large Palatino, serif}
P {font:normal small-caps 120%/120% Fantasy}