CSS3 字體
@font-face是CSS3中的一個(gè)模塊，它主要是把自己定義的Web字體嵌入到你的網(wǎng)頁中，隨著@font-face模塊的出現(xiàn)，我們?cè)赪eb的開發(fā)中使用字體就不用再為只能使用Web安全字體煩惱了！肯定會(huì)有人問，這樣的東西IE能支持嗎？我告訴大家@font-face這個(gè)功能其實(shí)早在IE4就支持了，你肯定會(huì)感到驚訝。如果你看到一些英文網(wǎng)站或blog看到一些很漂亮的自定義Web字體，比如說首頁的Logo，Tags以及頁面中的手寫英文體，一句話這些都是@font-face實(shí)現(xiàn)的。
首先我們一起來看看@font-face的語法規(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>];
}
取值說明：
font-family：設(shè)置文本的字體名稱。
font-style：設(shè)置文本樣式。
font-variant：設(shè)置文本是否大小寫。
font-weight：設(shè)置文本的粗細(xì)。
font-stretch：設(shè)置文本是否橫向的拉伸變形。
font-size：設(shè)置文本字體大小。
src：設(shè)置自定義字體的相對(duì)路徑或者絕對(duì)路徑，注意，此屬性只能在@font-face規(guī)則里使用。?
兼容瀏覽器
說到瀏覽器對(duì)@font-face的兼容問題，這里涉及到一個(gè)字體format的問題，因?yàn)椴煌臑g覽器對(duì)字體格式支持是不一致的，這樣大家有必要了解一下，各種版本的瀏覽器支持什么樣的字體，前面也簡單帶到了有關(guān)字體的幾種格式，下面我就分別說一下這個(gè)問題，讓大家心里有一個(gè)概念：
一、TureTpe(.ttf)格式：
.ttf字體是Windows和Mac的最常見的字體，是一種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è)開放的TrueType/OpenType的壓縮版本，同時(shí)也支持元數(shù)據(jù)包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體,支持這種字體的瀏覽器有【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>
