@font-face是CSS3新特性中的一個模塊,今天就來介紹下它。它主要是把自定義的Web字體嵌入到你的網頁中。說白了就是可以幫助你在網頁上使用漂亮的特殊字體,即非Web安全字體.
而不用擔心,你的網頁發佈以後,瀏覽者的電腦萬一沒安裝這個字體就壞事了的情況。一般不是專業從業人員,如設計師,普通網友的字體庫是不會裝太多字體的。所以@font-face就派上用處了。
@font-face怎麼用?
(1)@font-face的語法:
@font-face {
font-family: 'Your Web Font Name';
font-weight:normal;
src: url('fonts/YourWebFontName.eot');
src: url('fonts/YourWebFontName.eot') format('eot'),
url('fonts/YourWebFontName.woff2') format('woff2'),
url('fonts/YourWebFontName.woff') format('woff'),
url('fonts/YourWebFontName.ttf') format('ttf'),
url('fonts/YourWebFontName.svg') format('svg');
}
p { font-family: 'Your Web Font Name', serif; }
當然還有這種寫法的:
@font-face{
font-family:'Your Web Font Name';
font-weight:normal;
src:url('YourWebFontName.eot?')format('eot')/*IE*/,
src:local('YourWebFontName'),
url('fonts/YourWebFontName.woff2') format('woff2'),
url('fonts/YourWebFontName.woff') format('woff'),
url('fonts/YourWebFontName.ttf') format('ttf'),
url('fonts/YourWebFontName.svg') format('svg');/*Not for IE*/
}
p { font-family: 'Your Web Font Name', serif; }
(2)語法解析YourWebFontName:指你自定義字體的名稱,最好使用你下載字體的默認名稱,他將被引用到你Web元素中的font-family裏。url:裏面填你下載要用字體的絕對或相對地址。比如url('../gebz/pts55f-webfont.woff')。format('woff'):括號中填字體的格式,主要用於幫助瀏覽器識別。一般有ttf,otf,woff,eot,svg幾種常見字體格式,這個下面會介紹)。
第二種寫法中的local是一種hack的手法。目的是保護IE瀏覽器。如果沒有這句,IE會嘗試將第二個src描述符的值讀作一個路徑,並向服務器發出一個額外無用的請求。特地寫了第一個src的目的也是爲了保證IE能讀到正確路徑。具體可參看《CSS3實用指南》ZM. Gillenwater. 頁碼P112-P114。
另外這種寫法在Android系統中會有BUG,感興趣的同學可以看看《BestPracticeFor@Font-Face》。改進方法可以寫兩個@font-face,一個兼容IE,另一個非IE。比如:
@font-face{
font-family:'Your Web Font Name';
font-weight:normal;
src:url('YourWebFontName.eot?')format('eot')/*IE*/,
}
@font-face{
font-family:'Your Web Font Name';
font-weight:normal;
src: url(//:) format("no404"),
url('fonts/YourWebFontName.woff2') format('woff2'),
url('fonts/YourWebFontName.woff') format('woff'),
url('fonts/YourWebFontName.ttf') format('ttf'),
url('fonts/YourWebFontName.svg') format('svg');/*Not for IE*/
}
p { font-family: 'Your Web Font Name', serif; }
url(//:)format("no404")是一種Bulletproof寫法,感興趣的同學可看《New@Font-FaceSyntax:Simpler,Easier》一文。另外,爲了使@font-face達到更多的瀏覽器支持,PaulIrish寫了一個獨特的@font-face語法叫《Bulletproof@font-face》。
字體格式以及支持的瀏覽器
- TureType(.ttf)格式
(.ttf)字體是Windows和Mac的最常見字體,是一種RAW格式,因此他不爲網站優化,支持這種字體的瀏覽器有:
(IE9+,FF3.5+ Chrome4+,Safari3+,Opera10+,IOSMobileSafari4.2+)
- OpenType(.otf)格式
(.otf)字體被認爲是一種原始的字體格式,其內置在TureType的基礎上,所以也提供了更多的功能,支持這種字體的瀏覽器有:
(FF3.5+ ,Chrome4.0+,Safari3.1+,Opera10.0+,IOSMobile Safari4.2+)
- Web Open Font Format(.woff)格式
(.woff)字體是Web字體中最佳格式,可以看作是 TrueType、OpenType 字體數據的簡單重新封裝,不過內建了壓縮功能,因而體積更小、方便下載和傳播。另外還支持元數據,所以廠商可以在他們的字體中加入相關識別信息。支持這種字體的瀏覽器有:
(IE9+,FF3.5+,Chrome6+,Safari3.6,Opera11.1+)
- Embedded Open Type(.eot)格式
(.eot)字體是IE的專用字體,可以從TrueType創建此格式字體,支持這種字體的瀏覽器有:(IE4+)
- SVG(.svg)格式
(.svg)字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有:
(Chrome4+,Safari3.1+,Opera10.0+,ISO MobileSafari3.2+)
內容 | IE6IE7IE8 | FF3.5+ | Chrome | Safari | Opera |
---|---|---|---|---|---|
.ttf,.otf | 不支持 | 支持 | 支持 | 支持 | 支持 |
.eot | 支持 | 不支持 | 不支持 | 不支持 | 不支持 |
.svg | 不支持 | 不支持 | 支持 | 支持 | 支持 |
woff | 不支持 | 支持 | 支持 | 支持 | 支持 |
由上面可以得出:.eot + .ttf /.otf + svg + woff = 所有瀏覽器的完美支持。
當然這些不同的字體格式哪裏來呢?網上有一些專門的字體格式轉換的網站。
在線字體格式轉換網站
(1)Fontsquirrel
主要是英文字體轉換,上傳你已有的字體格式以後,進行轉換就可以得到一個裝有多種字體的壓縮文件,解壓縮後,裏面除了@font-face所需要的衆字體格式外,還帶有一個DEMO文件,不明白怎麼使用的,可以看一下這個DEMO文件,但千萬別複製DEMO文件,要不然我上面的語法解析就白講了。
上傳你的字體文件,然後選擇中間的OPTIMAL推薦最佳格式,然後就可以轉換了。
(2)EveryThingFonts
當上面的Fontsquirrel網登不上用不了時,可以選擇在EveryThingFonts網試一試,可以下載中文字體,是我新發現的在線字體格式轉換網站,也是我最近常用的工具,非常推薦,比Fontsquirrel網穩定。鼠標滑塊將No滑爲Yes,點擊Pick Font File上傳你已有的字體,然後點擊Convert進行轉換即可。
@font-face使用小結
如果你的項目中是英文網站,而且項目中的LOGO,TAGS等應用到較多的特殊字體效果,則比較建議用@font-face,但如果是中文網站,還是使用圖片比較合適,因爲加載英文字體和圖片沒多大區別,但是加載中文字體可能會影響性能優化,因爲中文一套字體一般要3-6M,這樣的龐然大物嵌入網頁上,結果可想而知,在頁面加載完成前已經被關掉了。
當然,不是說中文就無法通過@font-face實現嵌入,但需要再麻煩一步:按需截取(根據文章所涉及到的文字生成小字庫),中文的無論如何都要先截取一下的。如此便能最大程度地節約流量,將字體減到最小。
看到漂亮字體不知是啥字體咋辦?
最後推薦一個用圖片搜索字體的網站——求字網,你一定碰到過這樣的情況,看到某個網站使用了很漂亮的字體,想知道是什麼字體?除了可以查閱源代碼獲取,還可以將文字截成圖片,放到求字網上去匹配搜索,當然我更建議使用源代碼,因爲有時求字網數據庫不夠全會找不到答案。