CSS3 Tutorial-Fonts

Front-end developers, how much do you know about using CSS3 Tutorial-@font-face for personalized fonts? Today we introduce you to CSS3 @font-face, interested to understand the next.

In the Web page, we can use the CSS Font-family property to define the font, but the definition of the font on the user's computer can be rendered correctly depends on whether the user's computer installed the font. We can often see some foreign personal sites using very beautiful fonts, and these fonts are usually not installed in the user's computer, so with the font-family attribute can not be implemented, today we introduce the use of @font-face to implement personalized fonts.

CSS3 @font-face Rules:

Before CSS3, the web designer must use fonts that have been installed on the user's computer.

Css3,web designers can use any font they like.

When you find or buy the font you want to use, you can store the font file on the Web server, which is automatically downloaded to the user's computer when needed.

Your "own" font is defined in the CSS3 @font-face rule.

@font-face supports the following properties:

Font-family: Sets the font name of the text.

Font-style: Sets the text style.

Font-variant: Sets whether the text is case-sensitive.

Font-weight: Sets the thickness of the text.

Font-stretch: Sets whether the text is stretched horizontally.

Font-size: Sets the text font size.

SRC: Sets the relative path or absolute path of a custom font.

Browser support:

Firefox, Chrome, Safari, and Opera support. TTF (True type Fonts) and. OTF (OpenType Fonts) types of fonts.

Internet Explorer + + supports the new @font-face rules, but only the. EoT type of font (Embedded OpenType) is supported.

Note: Internet Explorer 8 and earlier versions do not support the new @font-face rules.

Use the font you need:

In the new @font-face rule, you must first define the name of the font (such as Myfirstfont), and then point to the font file.

To use fonts for HTML elements, refer to the name of the font (Myfirstfont) through the Font-family property:

Instance:

<style> @font-face{font-family:myfirstfont;src:url (' Sansation_light.ttf '), url (' Sansation_light.eot ');/* ie9+ */}div{font-family:myfirstfont;} </style>

Use bold font:

You must add another @font-face that contains a descriptor for bold text:

Instance:

@font-face{font-family:myfirstfont;src:url (' Sansation_bold.ttf '), url (' Sansation_bold.eot ');/* ie9+ */font-weight : Bold;}

The file "Sansation_bold.ttf" is another font file that contains the bold characters of the Sansation font.

The browser will use this font as long as the text font-family for "Myfirstfont" needs to appear bold.

In this way, we can set many @font-face rules for the same font.

CSS3 Font Descriptor:

The following table lists all the font descriptors that can be defined in the @font-face rule:

Descriptor	Value	Describe
Font-family	Name	Necessary. Specifies the name of the font.
Src	Url	Necessary. Defines the URL of the font file.
Font-stretch	Normal Condensed Ultra-condensed Extra-condensed semi-condensed Expanded Semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font is stretched. The default is "normal".
Font-style	Ormal Italic Oblique	Optional. Defines the style of the font. The default is "normal".
Font-weight	Normal Bold 100 200 300 400 500 600 700 800 900	Optional. Defines the weight of the font. The default is "normal".
Unicode-range	Unicode-range	Optional. Defines the range of UNICODE characters supported by the font. The default is "U+0-10ffff".

The above is the CSS3 tutorial-the font content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

