CSS Font Properties

CSS font:

Property	Describe
Font	property, set all properties for the font in one declaration.
Font-family	Sets the font family.
Font-size	Sets the size of the font.
Font-size-adjust	Intelligently scales the replacement font when the preferred font is not available. (CSS2.1 has deleted this property.) ）
Font-stretch	Horizontally stretches the font. (CSS2.1 has deleted this property.) ）
Font-style	Sets the font style.
Font-variant	Displays text in a small uppercase font or in a normal font.
Font-weight	Sets the weight of the font.

1. Font series:

(1) In CSS, there are two different types of font family names:

<1> Universal Font Family -a combination of font systems with similar appearance (e.g. "Serif" or "monospace");

<2> Specific font family -specific font family (e.g. "times" or "Courier");

(2) CSS also defines 5 kinds of universal font families:

<1>serif font (serif font)

These fonts are proportional and have short and upper lines. If all the characters in the font have different widths depending on their size, the character is proportional. Examples of Serif fonts include times, Georgia, and New Century schoolbook. for Chinese, the song body belongs to the serif font, and for Chinese, the song body belongs to serif font, while English, commonly used serif font is times New Roman.

<2>sans-serif fonts

These fonts are proportional and have no upper and lower short lines. Examples of Sans-serif fonts include Helvetica, Geneva, Verdana, Arial, or Univers. for Chinese, the blackbody, the young circle, and the Jas black belong to the sans serif font. in English, the commonly used sans serif font is Arial.

<3>monospace font (fixed width)

monospace fonts are not proportional. They are often used to simulate typewriter-typed text, the output of old-fashioned dot-matrix printers, or even older video display terminals. With these fonts, each character must have exactly the same width, regardless of whether it has a top or bottom dash. Examples of monospace fonts include Courier, Courier New, and Andale Mono.

<4>cursive font (cursive)

These fonts attempt to mimic the human handwriting. Typically, they consist mainly of stroke decorations that are not in the curves and Serif fonts. For example, an uppercase a may have a small bend at the bottom of its left leg, or it will consist entirely of a flower body part and a small curved part. Examples of cursive fonts include Zapf Chancery, Author, and Comic Sans.

<5>fantasy Font

These fonts cannot be defined with any characteristics, only one thing is certain, and it is not easy to plan them into any other font family. Such fonts include Western, woodblock, and Klingon.

1. Specify font family: Font-family property

(1) Function: Specifies the font family of elements, the value of the Font-family property is a priority table for the font family name or/and class family name of an element. The browser uses the first value that it can recognize.

(2) Browser support: All major browsers support the Font-family property.

Ps: It is recommended to provide a generic font family in all font-family rules.

2. Font Style: Font-style property

(1) Function: Define the style of the font;

(2) Possible values:

Value	Describe
Normal	The default value. The browser displays a standard font style.
Italic	The browser displays an italic font style.
Oblique	The browser will display a italic font style.
Inherit	Specifies that the font style should be inherited from the parent element.

(3) The difference between italic and oblique:

Italic (italic) is a simple font style that has minor changes to the structure of each letter to reflect the changing appearance. In contrast, italic (oblique) text is an oblique version of normal vertical text.

Typically, italic and oblique text look exactly the same in a Web browser.

(4) Browser support: All major browsers support the Font-style property.

3. Font Morphing: Font-variant properties

(1) Function: Set small capital letters;

(2) Possible values:

Value	Describe
Normal	The default value. The browser will display a standard font.
Small-caps	The browser displays the font for small caps.
Inherit	Specifies that the value of the Font-variant property should be inherited from the parent element.

(3) Browser support: All major browsers support the Font-variant property.

4. Font Bold: Font-weight property

(1) Function: Set the thickness of the text;

(2) Possible values:

Value	Describe
Normal	The default value. Defines the standard character.
Bold	defines bold characters.
Bolder	Defines a more coarse character.
Lighter	Defines a finer character.
100-900	Defines the characters from coarse to fine. 400 equals normal,700 equals bold.
Inherit	Specifies that the weight of the font should be inherited from the parent element.

(3) Browser support: All major browsers support the Font-weight property.

5. Font Size: Font-size property

(1) Function: Set the size of the text, which is actually set the height of the character box in the font, the actual character glyphs may be higher or shorter than these boxes (usually shorter);

(2) Possible values:

value	description
xx-small x-small small medium large x-large xx-large	Set the font size to a different size, from Xx-small to Xx-large.
Smaller	Set the font-size to a smaller size than the parent element.
Larger	Set the font-size to a larger size than the parent element.
Length	Set the font-size to a fixed value.
%	Set Font-size to a percentage value based on the parent element.
Inherit	Specifies that the font size should be inherited from the parent element.

(3) Compare px and em:

<1> use the image to set the font size:

By setting the text size in pixels, you can have full control over the text size; in Firefox, Chrome, and Safari, you can resize the text in the above example, but not in Internet Explorer. Although the size of the text can be resized through the browser's zoom tool, this is actually an adjustment to the entire page, not just text.

<2> use EM to set the font size:

To avoid problems with text that cannot be adjusted in Internet Explorer, you can use EM units instead of pixels. 1em equals the current font size. If the font-size of an element is 16 pixels, then for that element, 1em is equal to 16 pixels. When you set the font size, the value of EM changes relative to the font size of the parent element.

#可以使用下面这个公式将像素转换为 em:

Pixels /16=em

(Note: 16 equals the default font size of the parent element, assuming that the parent element is font-size to 20px, then the formula should be changed to:pixels/20=em)

(4) Integrated use of EM and percentages: implemented in all browsers, you can display the same text size and allow all browsers to scale the size of the text. Cases:

PS: The default size for normal text (such as paragraphs) is 16 pixels (16px=1em).

CSS Font Properties