CSS3 字體
@font-face是CSS3中的一個(gè)模組，它主要是把自己定義的Web字體嵌入到你的網(wǎng)頁(yè)中，隨著@font-face模組的出現(xiàn)，我們?cè)赪eb的開(kāi)發(fā)中使用字體就不用再為只能使用Web安全字體煩惱了！一定會(huì)有人問(wèn)，這樣的東西IE能支持嗎？我告訴大家@font-face這個(gè)功能其實(shí)早在IE4就支援了，你一定會(huì)感到驚訝。如果你看到一些英文網(wǎng)站或blog看到一些很漂亮的自訂Web字體，比如說(shuō)首頁(yè)的Logo，Tags以及頁(yè)面中的手寫(xiě)英文體，一句話(huà)這些都是@font-face實(shí)現(xiàn)的。
首先我們一起來(lái)看看@font-face的語(yǔ)法規(guī)則：
@font- face {
? [font-family: <family-name>;]?
? [src: [ <uri> [format(<string>#)]? | < font-face-name> ]#;]?
? [unicode-range: <urange>#;]?
? [font-variant: <font-variant>;]?
? [font-feature-settings: normal|<feature-tag-value>#;]?
? [font-stretch: <font-stretch>;]?
? [font-weight: <weight>];
? [font-style: <style>];
}
取值說(shuō)明：
font-family：設(shè)定文字的字體名稱(chēng)。
font-style：設(shè)定文字樣式。
font-variant：設(shè)定文字是否大小寫(xiě)。
font-weight：設(shè)定文字的粗細(xì)。
font-stretch：設(shè)定文字是否橫向的拉伸變形。
font-size：設(shè)定文字字體大小。
src：設(shè)定自訂字體的相對(duì)路徑或絕對(duì)路徑，注意，此屬性只能在@font-face規(guī)則中使用。
相容瀏覽器
說(shuō)到瀏覽器對(duì)@font-face的相容問(wèn)題，這裡涉及到一個(gè)字體format的問(wèn)題，因?yàn)椴煌臑g覽器對(duì)字體格式支援是不一致的，這樣大家有必要了解一下，各種版本的瀏覽器支援什麼樣的字體，前面也簡(jiǎn)單帶到了有關(guān)字體的幾種格式，下面我就分別說(shuō)一下這個(gè)問(wèn)題，讓大家心裡有個(gè)概念：
一、TureTpe(.ttf)格式：
.ttf字體是Windows和Mac的最常見(jiàn)的字體，是一種RAW格式，因此他不為網(wǎng)站優(yōu)化,支援這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
二、OpenType(.otf)格式：
.otf字體被認(rèn)為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上，所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+ ,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
三、Web Open Font Format(.woff)格式：
.woff字型是Web字型中最佳格式，他是一個(gè)開(kāi)放的TrueType/OpenType的壓縮版本，同時(shí)也支援元資料包的分離,支援這種字型的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3. 6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字體是IE專(zhuān)用字體，可以從TrueType建立此格式字體,支援此字體的瀏覽器有【IE4+】；
五、SVG(.svg)格式：
.svg字體是基於SVG字體渲染的一種格式,支援這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10. 0+,iOS Mobile Safari3.2+】。
注意：實(shí)現(xiàn)本節(jié)的瀏覽器特效是需要下載上面這幾種字體格式檔案的！ ！ ！
<!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> 需要引入外部字體文件顯示效果。</p>
</body>
</html>
