網頁自定義字體終極教程（兼容各大瀏覽器）
作者：零度逍遙 | 時間：2014-08-25 | 瀏覽：1050 | 0 條評論
在我們瀏覽網頁的時候，文字占據著網頁的大部分空間，給我們提供重要的信息，所以作為前端開發工程師，我們有義務把網頁的字體設計的更加美觀，讓用戶看起來更加舒適，隨著CSS3的出現，網頁自定義字體收到越來越多的開發人員歡迎。

我想有人可能會像我一樣，嘗試搜索過各種方法，但都不是太理想，有的是加載不成功，有的則是兼容性不好，無奈，自己悶頭研究，終於在今天有了個成果，給大家分享一下。

一、字體格式的了解
首先，我們要的字體格式有個了解，常用的字體格式有以下幾種：TTF、WOFF、EOT、SVG。這些字體格式的說明，我就不細說了，想知道的可以百度一下，下面我關鍵說一下各大瀏覽器對這些字體格式的兼容性。

這張圖片很明白的展示了各大瀏覽器對字體的支持情況，其中TrueType就是TTF格式，這個字體格式標準的瀏覽器都會支持，只有腦殘的IE不認識，它只兼容EOT格式的字體，所以我們引入字體文件的時候最少要引入兩種格式——TTF和EOT。

二、自定義字體方法：
主要是利用CSS3的font-face，代碼如下：

@font-face {
font-family: "myFont"; //這裏可以隨意自定義字體名字
src: url(‘font.ttf‘); //引入字體文件
}
body {
font-family: "myFont"; //與font-face定義的字體名字保持一致
}
這段代碼只針對標準瀏覽器有效，要做到兼容的話，終極解決方案是以下代碼：

@font-face {
font-family: ‘MyFont‘;
src: url(‘font.eot‘); //針對IE9
src: url(‘font.eot?#iefix‘), //兼容IE6-IE8
url(‘font.ttf‘), //標準瀏覽器
url(‘font.woff‘), //標準瀏覽器
url(‘font.svg#MyFont‘); //不太常用
}
沒有這麽多格式的字體？簡單，推薦一個字體格式轉換網站：http://onlinefontconverter.com/ 很輕松完成各種字體格式轉換

http://videojs.com/

http://www.bootcss.com/p/layoutit/

自定義字體的方法