CSS3教程使用@font-face實(shí)現(xiàn)個(gè)性化字體

1、CSS3教程:使用font-face實(shí)現(xiàn)個(gè)性化字體在網(wǎng)頁(yè)中，我們可以用CSS的font-family屬性來(lái)定義字體，然而定義的字體在用戶(hù)的電腦上能否正確呈現(xiàn)則要看用戶(hù)的電腦是否安裝了該字體。我們經(jīng)常能看到國(guó)外的一些個(gè)人網(wǎng)站使用了非常漂亮的字體，而這些字體通常在用戶(hù)的電 腦中是沒(méi)有安裝的，所以用font-family屬性就無(wú)法實(shí)現(xiàn)了，今天我們就介紹使用憶門(mén)t-face實(shí)現(xiàn)個(gè)性化字體。CSS3 fon t-face說(shuō)憶門(mén)t-face是CSS3勺新特性并不準(zhǔn)確，因?yàn)?CSS2就已經(jīng)支持了這一特 性，并且In ternet Explorer 早在第5版的時(shí)候就已經(jīng)支持它了，不過(guò)IE實(shí)現(xiàn) 方式是通過(guò)自有

2、的eot(Embeded Open Type)字體格式，其它瀏覽器都不支持這 個(gè)格式。font-face支持如下屬性：fon t-family :設(shè)置文本的字體名稱(chēng)。fon t-style :設(shè)置文本樣式。fon t-varia nt:設(shè)置文本是否大小寫(xiě)。fon t-weight :設(shè)置文本的粗細(xì)。fon t-stretch:設(shè)置文本是否橫向的拉伸變形。fon t-size :設(shè)置文本字體大小。src :設(shè)置自定義字體的相對(duì)路徑或者絕對(duì)路徑。font-face瀏覽器兼容性如下:3.5+輕4+鎏：3H+己10+一個(gè)簡(jiǎn)單例子先聲明一個(gè)名為ChantelliAntiquaRegular的字體，有一種

3、老的寫(xiě)法是這樣的：fon t-face fon t-family: Cha ntelliA ntiquaRegular;src: url(Cha ntelli_A ntiqua-webfo nt.eot);src: local( ? ), url(Chantelli_Antiqua-webfont.woff)format(woff), url(Cha ntelli_A ntiqua-webfo nt.ttf)format(truetype), url(Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc) format(svg); font-weight:

4、 normal;font-style: normal;第一個(gè) src 是兼容 IE ，第二個(gè) src 是兼容其它瀏覽器。 local( ? ) 是一種 hack寫(xiě)法，避免從客戶(hù)端加載字體，這種寫(xiě)法在An droid系統(tǒng)中有BUG感興趣 的同學(xué)可見(jiàn) Best Practice For Font-Face CSS Takes A Turn ，改進(jìn)方案 是聲明兩個(gè) font-face ，如下：font-face font-family: ChantelliAntiquaRegular;src: url(Chantelli_Antiqua-webfont.eot);font-face font-fam

5、ily: ChantelliAntiquaRegular;src: url(/:) format(no404), url(Chantelli_Antiqua-webfont.woff) format(woff), url(Chantelli_Antiqua-webfont.ttf) format(truetype), url(Chantelli_Antiqua-webfont.svg#webfontMFqI76bT) format(svg); font-weight: normal;font-style: normal;我們首先聲明一個(gè)引用 eot 字體文件的 font-face ，以確保它在

6、 IE 中能正 常工作，第二個(gè) font-face 引用了多個(gè)字體格式是為了兼容其它瀏覽器，它們 將按順序查找，直到找到支持的格式，這意味著同一個(gè)字體需要有多個(gè)格式。 url(/:) format(no404) 是一種 Bulletproof 寫(xiě)法，感興趣的同學(xué)可見(jiàn) New Font-Face Syntax: Simpler, Easier 一文。其它的HTML和CSS代碼如下：.font-face-display font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif;Take me to your heart最重效果如下：Take

7、 me to your heart免費(fèi)字體網(wǎng)站Font SquirrelFont Squirrel是一個(gè)非常優(yōu)秀的免費(fèi)字體資源網(wǎng)站，收集了很多高品質(zhì)字 體供網(wǎng)頁(yè)設(shè)計(jì)者免費(fèi)下載，還有個(gè)字體格式生成工具font-face generator，上眄傳一個(gè)字體文件，可以生成多種字體格式及 CSS代碼，非常有用。如果你需要一 些優(yōu)秀的免費(fèi)英文字體，這是個(gè)好去處。thx hi Ik-RdifivmIn MfftHHAL H4rt in ShW diiir FaMuHIMjudontMuseo Slab AaBbCcDdEeFfG亠 i . Shi ”- mi 亠-_想要豐富多彩的頁(yè)面就需要有更多的字體樣式，人們想出了很多字體替代方案，除了 font-face 方案外還有 sIFR、Cufon、Typeface.js 等，還有.webfont， 簡(jiǎn)單說(shuō)，.webfont就是在字體中嵌