基礎知識
@font-face雖然是CSS3模塊恒序，但是IE4時代開始就已經支持了它，只不過跟現(xiàn)在CSS3的功能相比完全不可比谁撼。
先看看http://www.css88.com/book/css/rules/@font-face.htm
可以看出歧胁，各種瀏覽器對它的支持五花八門滋饲，所以，寫出一個全瀏覽器兼容的定義字體的代碼就很重要喊巍。
@font-face的本質就是先定義屠缭，后使用。現(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- */
}
這種寫法的原因是：瀏覽器會從前往后嘗試使用字體奄喂，優(yōu)先使用eot字體，如果不兼容瀏覽器海洼，就使用woff字體跨新，依然不兼容就使用ttf字體，還不兼容就使用svg字體坏逢。
這里需要介紹一下eot格式域帐、ttf格式、woff格式是整、svg格式肖揣。
.eot ，Embedded Open Type浮入，主要用于早期版本的IE龙优，是其專有格式，帶有版權保護和壓縮事秀。
.ttf 彤断，TrueType，在操作系統(tǒng)里更為常見秽晚，在web上使用的話瓦糟，是為了兼容早期僅支持TTF和OTF的瀏覽器。由于體積比較大赴蝇，還需要服務器額外壓縮菩浙。
.otf，OTF擴展名的O表示OpenType - PostScript字體句伶，采用的是PostScript曲線劲蜻，支持OpenType高級特性。
.woff 考余，Web Open Font Format先嬉，可以看作是ttf的再封裝，加入了壓縮和字體來源信息楚堤，通常比ttf小40%疫蔓。也是當前web字體的主流格式含懊。
.woff2 ，Web Open Font Format 2.0衅胀，相比woff最大的優(yōu)化應該是加強了字體的壓縮比岔乔。目前 支持的瀏覽器 只有正在互飆版本號的Chrome和Firefox。
.svg滚躯，基于SVG字體渲染的一種格式雏门，支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
圖標字體
我們看看著名的glyphicons-halflings圖標字體庫都提供了哪些文件：
看來它提供全了掸掏。更著名的Font Awesome圖標字體茁影，提供了哪些文件呢？
那么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、先聲明字體家族的名稱息裸。
2蝇更、單獨聲明一個資源沪编，聲明eot呼盆。
3、再聲明一個資源蚁廓，依次聲明eot?#iefix访圃、woff2、woff相嵌、otf腿时、ttf、svg#xxx饭宾。順序一定不要錯批糟。資源的格式是url('...') format('...')。
現(xiàn)在看铆，我們研究一下怎么使用這兩個字體徽鼎。其實字體的開發(fā)方會給你提供一個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";
}
......
當你想使用一個圖標文字的時候否淤，只需要用一個span標簽，加上兩個類棠隐，就可以使用了石抡。
<span class="glyphicon glyphicon-asterisk"></span>
文字字體
現(xiàn)在我只想用一個文字字體，并不想用圖標字體助泽，怎么辦啰扛？
首先嚎京，我們要去找字體，比如從Google Web Fonts和Dafont.com尋找自己需要的字體∫猓現(xiàn)在我從Dafont.com下載了一個“Lost in Wild”字體挖藏，這個字體長相很囂張。我們試一試厢漩。
我把壓縮包下載到本機服務器的www目錄膜眠，解壓，里面有otf和ttf兩種文件溜嗜，分別為60KB和155KB宵膨。我先在HTML文件寫一段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';
}
然后構建一個簡單的HTML文件，主要內容是：
<p class="font-lostandwild">Too young, too simple, sometimes naive!</p>
打開頁面我們看看效果：
雖然看起來很亂炸宵，但是我們用起來是成功了辟躏。不過請注意，http://www.css88.com/book/css/rules/@font-face.htm 這里已經明確顯示土全，IE6-8是不支持otf/ttf字體的捎琐，所以如果要兼容到IE8，你找的字體庫里面必須要含有.eot文件裹匙，如果沒有瑞凑，要么找轉換工具做一個.eot文件，要么就放棄這個字體庫概页。
轉換工具：
1籽御、ttf2eot，這是一個node.js實現(xiàn)的庫惰匙，使用起來很簡單技掏。
2、微軟的WEFT 3.2项鬼，是一個程序哑梳，微軟出的程序的易用性不用懷疑。
最后绘盟，你可能會問鸠真，為啥沒有提中文網絡字體？中文字體由于體積大奥此，一般都在5MB以上弧哎，所以不適合作為網絡字體使用。有些網站“強行”使用上了中文網絡字體稚虎，用戶體驗很差撤嫩，因為你剛打開網頁的時候，5MB的字體文件還沒后臺下載下來蠢终，所以你看到的字體都是默認字體序攘，等了10秒之后茴她，后臺把字體下載下來，然后網頁會“一抖”程奠，其實是瀏覽器重新渲染一遍字體丈牢，然后你才能看到正確的字體。所以瞄沙，如果你找到了一款2M以內的中文字體网沾，就可以嘗試用用品姓，否則沒必要為了字體加大網頁體積押逼，你還有一種方法是把字寫到圖里面祭阀，貼一張圖即可。
