CSS3 字體
CSS3 @font-face 規(guī)則
以前CSS3的版本，網(wǎng)頁(yè)設(shè)計(jì)師不得不使用用戶(hù)計(jì)算機(jī)上已經(jīng)安裝的字體。
使用CSS3，網(wǎng)頁(yè)設(shè)計(jì)師可以使用他/她喜歡的任何字體。
當(dāng)你發(fā)現(xiàn)您要使用的字體文件時(shí)，只需簡(jiǎn)單的將字體文件包含在網(wǎng)站中，它會(huì)自動(dòng)下載給需要的用戶(hù)。
您所選擇的字體在新的CSS3版本有關(guān)于@font-face規(guī)則描述。
您"自己的"的字體是在 CSS3 @font-face 規(guī)則中定義的。
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。
Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字體.
Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字體)和.otf(OpenType)字體字體類(lèi)型）。
Chrome, Safari 和 Opera 也支持 SVG 字體/折疊.
Internet Explorer 同樣支持 EOT (Embedded OpenType) 字體.
注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 規(guī)則。
使用您需要的字體
在新的 @font-face 規(guī)則中，您必須首先定義字體的名稱(chēng)（比如 myFirstFont），然后指向該字體文件。
 | 提示：URL請(qǐng)使用小寫(xiě)字母的字體，大寫(xiě)字母在IE中會(huì)產(chǎn)生意外的結(jié)果 |
|---|
如需為 HTML 元素使用字體，請(qǐng)通過(guò) font-family 屬性來(lái)引用字體的名稱(chēng) (myFirstFont)：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字體.</p>
<div>
使用CSS3,網(wǎng)站終于可以使用字體以外的預(yù)先選擇“合法”字體
</div>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例
使用粗體文本
您必須添加另一個(gè)包含粗體文字的@font-face規(guī)則：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
使用CSS3,網(wǎng)站終于可以使用字體以外的預(yù)先選擇“合法”字體。
</div>
<p><b>注意:</b> Internet Explorer 8以及更早版本的瀏覽器 @font-face rule.</p>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例
該文件"Sansation_Bold.ttf"是另一種字體文件，包含Sansation字體的粗體字。
瀏覽器使用這一文本的字體系列"myFirstFont"時(shí)應(yīng)該呈現(xiàn)為粗體。
這樣你就可以有許多相同的字體@font-face的規(guī)則。
CSS3 字體描述
下表列出了所有的字體描述和里面的@font-face規(guī)則定義：
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。規(guī)定字體的名稱(chēng)。 |
| src | URL | 必需。定義字體文件的 URL。 |
| font-stretch |
| 可選。定義如何拉伸字體。默認(rèn)是 "normal"。 |
| font-style |
| 可選。定義字體的樣式。默認(rèn)是 "normal"。 |
| font-weight |
| 可選。定義字體的粗細(xì)。默認(rèn)是 "normal"。 |
| unicode-range | unicode-range | 可選。定義字體支持的 UNICODE 字符范圍。默認(rèn)是 "U+0-10FFFF"。 |