CSS 参考手册

CSS @规则(RULES)

CSS attribute大全

CSS @font-face rule

@font-face rule is used to associate the font name to be used in the style sheet with some downloadable fonts, @font-face CSS at-rule specifies a custom font used to display text.

　The rule uses the font familyfont-familyUse the descriptor to name the font, and the src descriptor is associated with the external font name.

usage syntax

The syntax of the rule is as follows:

@font-face: font-description

The @font-The face rule includes one or more declarations of properties, just like those in regular CSS, which is called font description. You can specify at most24different properties, but all their explanations are beyond the scope of this reference-For more information, please visitW3C CSS font modulepage.

@font-The general form of the face rule is:

@font-face { font-family: fontname; src: url(fontfile path); }

Later, the font can be used as a property (such asfont-familyand) namefontHowever, if downloadable fonts are not supported or for some reason the font cannot be loaded, you should specify another font name as a fallback.

The following example demonstrates how to use @font-face attribute.

Example

　　@font-face {
　　　font-family: "OpenSans";
　　　src: url("../fonts/OpenSans-Regular.eot");
　　　src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
　　}
　　body {
　　　font-family: "OpenSans", Arial, sans-serif;
　　　font-size:　1.2em;
　　}

Test see‹/›

Note:By using @ font-face rules, you do not have to rely on the limit of the number of fonts installed on the user's computer.

By setting the corresponding rules to, when specific font features such as bold or italic are set, the selection of specific downloadable fonts can also be set using @font-face.

Example

　　@font-face {
	font-family: "OpenSans";
　　　src: url("../fonts/OpenSans-Regular.eot");
　　　src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
　　}
　　@font-face {
　　　font-family: "OpenSansBold";
　　　src: url("../fonts/OpenSans-Bold.eot");
	src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
　　}
　　h1　{
　　　font-family: "OpenSansBold", Arial, sans-serif;　/*　Specify the OpenSans bold font　*/
　　}
　　p {
　　　font-family: "OpenSans", Arial, sans-serif;
　　}

Test see‹/›

Parameter

The meaning of the parameter is as follows:

Parameter	Value	Description
Required -The following parameters are required.
font-family	font-family	Define the fontfont-familyFont name of the font value of the font property.
src	src	Specify the location of the font file to be used.
Optional -The following parameters are optional.
font-style	font-style	Validfont-styleProperty values.
font-weight	font-weight	Validfont-weightProperty values (relative values bolder and lighter).

Browser compatibility

@font-Browser compatibility of the face attribute; the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this rule.

	Firefox 3.5+ Google Chrome 4+ Internet Explorer 4+ Apple Safari 3.1+ Opera 10+

Note:Browser support for specific font technologies varies greatly. Internet Explorer supports .eot and .wof font types, while Firefox, Chrome, Safari, and Opera support .woff, .ttf, and .otf font types.