首先,瀏覽器支持什么字體取決于用戶系統里安裝了什么字體,比如CSS中這么寫:
font-family:"微軟雅黑","黑體","宋體";
那么瀏覽器會嘗試按照從左到右的順序依次應用,假設用戶電腦上沒有安裝微軟雅黑,那么就用黑體。
接下來,開發人員有點郁悶了,這個世界有這么多字體,我怎么保證用戶電腦上有我希望的字體呢?美工給我的完美效果,到了老板電腦上一團糟,會不會被罵死?
這時,CSS勇敢的站出來了,它約定了5種通用字體:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace",請注意,這5個不是5個字體,表示5類字體,比如說serif表示那種字體成比例,且上下有小橫線的(參考time new roman),那么只要符合這個特征的字體都可以算成是serif, 具體采用哪個字體,由瀏覽器自己根據用戶電腦上安裝了哪種字體采用一個默認的,各瀏覽器可能有所不同。幾乎所有你知道的普通字體都落入這5種字體類中,這樣CSS可以基本上保證一個網頁呈現在不同用戶的電腦上的用戶體驗是差不多的。
最后,我們的美工比較變態,非要弄了個高大上的字體,一般用戶電腦上都沒有的咋整?我們可以用font-face讓用戶的瀏覽器從服務器上下載字體
@font-face {font-family: 美輪美奐的字體;src:url('字體文件1.woff'), url('字體文件2.ttf'),url('字體文件3.eot');
}
你問我為什么要搞好幾個url指向多個字體文件?我只能說還是為了那個坑爹的兼容性,怕有的字體文件在這個操作系統不支持啊。。。