基礎(chǔ)知識(shí)

@font-face雖然是CSS3模塊，但是IE4時(shí)代開(kāi)始就已經(jīng)支持了它，只不過(guò)跟現(xiàn)在CSS3的功能相比完全不可比。

先看看http://www.css88.com/book/css/rules/@font-face.htm

可以看出，各種瀏覽器對(duì)它的支持五花八門(mén)，所以，寫(xiě)出一個(gè)全瀏覽器兼容的定義字體的代碼就很重要。

@font-face的本質(zhì)就是先定義，后使用。現(xiàn)在我們先定義：

@font-face {
    font-family: 'diyfont';
    src: url('diyfont.eot'); /* IE9+ */
    src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('diyfont.woff') format('woff'), /* chrome、firefox */
         url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

這種寫(xiě)法的原因是：瀏覽器會(huì)從前往后嘗試使用字體，優(yōu)先使用eot字體，如果不兼容瀏覽器，就使用woff字體，依然不兼容就使用ttf字體，還不兼容就使用svg字體。

這里需要介紹一下eot格式、ttf格式、woff格式、svg格式。

.eot ，Embedded Open Type，主要用于早期版本的IE，是其專(zhuān)有格式，帶有版權(quán)保護(hù)和壓縮。
.ttf ，TrueType，在操作系統(tǒng)里更為常見(jiàn)，在web上使用的話，是為了兼容早期僅支持TTF和OTF的瀏覽器。由于體積比較大，還需要服務(wù)器額外壓縮。
.otf，OTF擴(kuò)展名的O表示OpenType - PostScript字體，采用的是PostScript曲線，支持OpenType高級(jí)特性。
.woff ，Web Open Font Format，可以看作是ttf的再封裝，加入了壓縮和字體來(lái)源信息，通常比ttf小40%。也是當(dāng)前web字體的主流格式。
.woff2 ，Web Open Font Format 2.0，相比woff最大的優(yōu)化應(yīng)該是加強(qiáng)了字體的壓縮比。目前 支持的瀏覽器 只有正在互飆版本號(hào)的Chrome和Firefox。
.svg，基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

圖標(biāo)字體

我們看看著名的glyphicons-halflings圖標(biāo)字體庫(kù)都提供了哪些文件：

Paste_Image.png

看來(lái)它提供全了。更著名的Font Awesome圖標(biāo)字體，提供了哪些文件呢？

Paste_Image.png

那么glyphicons-halflings如何聲明呢？

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("../fonts/glyphicons-halflings-regular.eot");
  src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"),
    url("../fonts/glyphicons-halflings-regular.woff") format("woff"),
    url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"),
    url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }

再看看Font Awesome怎么聲明的：

@font-face {

font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
    url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
    url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
    url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
    url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

找到規(guī)律了吧，聲明的順序是：

1、先聲明字體家族的名稱(chēng)。
2、單獨(dú)聲明一個(gè)資源，聲明eot。
3、再聲明一個(gè)資源，依次聲明eot?#iefix、woff2、woff、otf、ttf、svg#xxx。順序一定不要錯(cuò)。資源的格式是url('...') format('...')。

現(xiàn)在，我們研究一下怎么使用這兩個(gè)字體。其實(shí)字體的開(kāi)發(fā)方會(huì)給你提供一個(gè)CSS文件，完全不用你自己考慮如何使用字體。大致如下：

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glyphicon-asterisk:before {
  content: "\002a";
}
......

當(dāng)你想使用一個(gè)圖標(biāo)文字的時(shí)候，只需要用一個(gè)span標(biāo)簽，加上兩個(gè)類(lèi)，就可以使用了。

<span class="glyphicon glyphicon-asterisk"></span>

文字字體

現(xiàn)在我只想用一個(gè)文字字體，并不想用圖標(biāo)字體，怎么辦？

首先，我們要去找字體，比如從Google Web Fonts和Dafont.com尋找自己需要的字體。現(xiàn)在我從Dafont.com下載了一個(gè)“Lost in Wild”字體，這個(gè)字體長(zhǎng)相很?chē)虖垺Ｎ覀冊(cè)囈辉嚒?/p>

我把壓縮包下載到本機(jī)服務(wù)器的www目錄，解壓，里面有otf和ttf兩種文件，分別為60KB和155KB。我先在HTML文件寫(xiě)一段CSS規(guī)則：

@font-face {
font-family: 'Lost and Wild';
src: url('/lost_in_wild/Lost in Wild.otf') format('opentype'),
    url('/lost_in_wild/Lost in Wild.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

.font-lostandwild {
  font-family: 'Lost and Wild';
}

然后構(gòu)建一個(gè)簡(jiǎn)單的HTML文件，主要內(nèi)容是：

<p class="font-lostandwild">Too young, too simple, sometimes naive!</p>

打開(kāi)頁(yè)面我們看看效果：

Lost and Wild字體使用效果

雖然看起來(lái)很亂，但是我們用起來(lái)是成功了。不過(guò)請(qǐng)注意，http://www.css88.com/book/css/rules/@font-face.htm 這里已經(jīng)明確顯示，IE6-8是不支持otf/ttf字體的，所以如果要兼容到IE8，你找的字體庫(kù)里面必須要含有.eot文件，如果沒(méi)有，要么找轉(zhuǎn)換工具做一個(gè).eot文件，要么就放棄這個(gè)字體庫(kù)。

轉(zhuǎn)換工具：

1、ttf2eot，這是一個(gè)node.js實(shí)現(xiàn)的庫(kù)，使用起來(lái)很簡(jiǎn)單。

2、微軟的WEFT 3.2，是一個(gè)程序，微軟出的程序的易用性不用懷疑。

最后，你可能會(huì)問(wèn)，為啥沒(méi)有提中文網(wǎng)絡(luò)字體？中文字體由于體積大，一般都在5MB以上，所以不適合作為網(wǎng)絡(luò)字體使用。有些網(wǎng)站“強(qiáng)行”使用上了中文網(wǎng)絡(luò)字體，用戶(hù)體驗(yàn)很差，因?yàn)槟銊偞蜷_(kāi)網(wǎng)頁(yè)的時(shí)候，5MB的字體文件還沒(méi)后臺(tái)下載下來(lái)，所以你看到的字體都是默認(rèn)字體，等了10秒之后，后臺(tái)把字體下載下來(lái)，然后網(wǎng)頁(yè)會(huì)“一抖”，其實(shí)是瀏覽器重新渲染一遍字體，然后你才能看到正確的字體。所以，如果你找到了一款2M以?xún)?nèi)的中文字體，就可以嘗試用用，否則沒(méi)必要為了字體加大網(wǎng)頁(yè)體積，你還有一種方法是把字寫(xiě)到圖里面，貼一張圖即可。