CSS3 字體
CSS3?字體
#CSS3 @font-face 規(guī)則
以前CSS3的版本，網(wǎng)頁設(shè)計(jì)師必須使用使用者電腦上已經(jīng)安裝的字型。
使用CSS3，網(wǎng)頁設(shè)計(jì)師可以使用他/她喜歡的任何字體。
當(dāng)你發(fā)現(xiàn)您要使用的字體檔案時(shí)，只需簡單的將字體檔案包含在網(wǎng)站中，它會(huì)自動(dòng)下載給需要的使用者。
您所選的字體在新的CSS3版本有關(guān)於@font-face規(guī)則描述。
您"自己的"的字體是在 CSS3 @font-face 規(guī)則中定義的。
使用您需要的字體
在新的@font- face 規(guī)則中，您必須先定義字體的名稱（例如myFirstFont），然後指向該字體檔案。
提示：URL請使用小寫字母的字體，大寫字母在IE中會(huì)產(chǎn)生意外的結(jié)果? ?
如需為HTML 元素使用字體，請透過font- family 屬性來引用字體的名稱(myFirstFont)：
<!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>使用粗體文字
#您必須新增另一個(gè)包含粗體文字的@font-face規(guī)則：
<!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>該文件"Sansation_Bold.ttf"是另一個(gè)字體文件，包含Sansation字體的粗體字。
瀏覽器使用這一文字的字體系列"myFirstFont"時(shí)應(yīng)該呈現(xiàn)為粗體。
這樣你就可以有許多相同的字體@font-face的規(guī)則。
CSS3 字體描述
#下表列出了所有的字體描述和裡面的@font-face規(guī)則定義：
| 描述子 | 值 | |
|---|---|---|
| ##font- family | name | 必要。規(guī)定字體的名稱。 |
| src | URL | #必要。定義字型檔案的 URL。 |
| font-stretch |
| 可選。定義如何拉伸字體。預(yù)設(shè)是 "normal"。 |
| font-style |
| 可選。定義字體的樣式。預(yù)設(shè)是 "normal"。 |
| font-weight |
| 可選。定義字體的粗細(xì)。預(yù)設(shè)是 "normal"。 |
| unicode-range | unicode-range | 可選。定義字體支援的 UNICODE 字元範(fàn)圍。預(yù)設(shè)是 "U+0-10FFFF"。 |
