CSS3 fonts

CSS3 font

##CSS3 @font-face rules

In previous versions of CSS3, web designers had to use fonts that were already installed on the user’s computer.

With CSS3, a web designer can use any font he/she likes.

When you find a font file you want to use, simply include the font file on your website and it will automatically be downloaded to users who need it.

The font you choose has @font-face rules described in the new CSS3 version.

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

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.

Tips: Please use lowercase fonts for URLs. Uppercase letters will produce unexpected results in IE

If you need to use fonts for HTML elements, please pass font- family attribute to reference the name of the font (myFirstFont):

php中文网(php.cn)

注意: Internet Explorer 9 只支持 .eot 格式的字体.

使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体

Use bold text

You must add another @font-face rule that contains bold text:

php中文网(php.cn)

使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体。

注意: Internet Explorer 8以及更早版本的浏览器 @font-face rule.

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

Browsers using the font family "myFirstFont" for this text should render it bold.

This way you can have many @font-face rules for the same font.

CSS3 font description

The following table lists all font descriptions and the @font-face rule definitions inside:

##font- family Required. Specifies the name of the font. src Required. Defines the URL of the font file. font-stretch Optional. Defines how to stretch the font. The default is "normal". font-style Optional. Define the style of the font. The default is "normal". font-weight Optional. Defines the weight of the font. The default is "normal". unicode-range Optional. Defines the range of UNICODE characters supported by the font. The default is "U+0-10FFFF".

Descriptor	Value	Description
	name
	URL
	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded
	normal italic oblique
	normal bold 100 200 300 400 500 600 700 800 900
	unicode-range