目錄
一、語法
@font-face {
font-family: <fontFamily>; /* 自定義字體名稱; */
src: <source> [<format>][,<source> [<format>]]*; /* 自定義字體的存放路徑、格式; */
[font-weight: <weight>];
[font-style: <style>];
}
src: 遠程字體文件位置的URL或用戶計算機上的字體名稱，可以使用 local 語法指定用戶本機上的字體。如果找不到該字體，將會按順序嘗試其他來源，直到找到它。
iconfont 圖標字體就是使用了自定義字體。
二、字體格式
1) .ttf 格式
.ttf 全稱 TrueType，是 Windows 和 Mac 最常用的字體格式，其最大的特點就是它是由一種數學模式來進行定義的基於輪廓技術的字體，這使得它們比基於矢量的字體更容易處理，保證了屏幕與打印輸出的一致性。同時，這類字體和矢量字體一樣可以隨意縮放、旋轉而不必擔心會出現鋸齒。
2) .otf 格式
.otf 全稱 OpenType，是一種可縮放字型電腦字體類型，採用 PostScript格式，是美國微軟公司與Adobe 公司聯合開發，用來替代 TrueType 字型的新字型。
3) .eot 格式
嵌入字體格式 .eot 全稱 Embedded Open Type，是微軟開發的一種技術，允許 OpenType 字體嵌入到網頁並可以下載至瀏覽器渲染。這些文件只在當前頁活動的狀態下，臨時安裝在用戶的系統中，是 IE 專用字體。
4) .woff 格式
Web開發字體格式 .woff 全稱 Web Open Font Format，是一種專門爲了 Web 而設計的字體格式標準，是對 TrueType / OpenType 等字體格式的封裝，並針對網絡使用加以優化：每個字體文件中含有字體以及針對字體的元數據（ Metadata ），字體文件被壓縮，以便於網絡傳輸，並且不包含任何加密或者 DRM 措施，是 Web 字體中最佳格式。
兼容性：IE9+
5) .svg 格式
.svg 全稱 Scalable Vector Graphics Fonts，是使用SVG來呈現字體，還有一種 gzip 壓縮格式的 SVG 字體 .svgz。
兼容性：Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+
三、實戰使用
首先我們可以到 dafont 隨便下載一個字體，這裏我們選中了下面這個字體：
解壓之後，得到我們的字體文件（ .ttf 和 .otf 屬於不同格式的字體）
編寫代碼（爲了方便使用，已經把 .ttf 格式的字體重命名爲 webfont.ttf）
/* 定義字體 */
@font-face {
font-family: MyFont;
src: url('webfont.ttf') format('truetype'),
url('webfont.otf');
}
/* 使用字體 */
.font {
font-family: MyFont;
}
四、各瀏覽器兼容
@font-face {
font-family: 'myFont';
src: url('myFont.eot'); /* IE9 Compat Modes */
src: url('myFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('myFont.woff') format('woff'), /* Modern Browsers */
}
五、用 unicode-range 指定字體適用範圍
現在我們再來下載一種比較飄逸的字體
現在我們來實現一下 a 用這種比較飄逸的字體（J-Flames），其餘的用上面那種字體
@font-face {
font-family: MyFont;
src: url('webfont.ttf') format('truetype'),
url('webfont.otf');
}
@font-face {
font-family: Fashion;
src: url('J-Flames.ttf');
unicode-range: U+61; /* a的unicode */
}
.font {
font-family: Fashion, MyFont;
}
效果圖
1. unicode-range的值和語法
unicode-range 值的組成：U+跟上對應字符的charCode值。
unicode-range: U+26; /* 單個字符編碼 */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* 字符編碼區間 */
unicode-range: U+4??; /* 通配符區間 */
unicode-range: U+0025-00FF, U+4??; /* 多個值 */
這裏使用的 Unicode 是十六進制的，所以要把用 charCodeAt 獲取的十進制 Unicode 用 toString 轉成十六進制才能使用。
let unicode10 = 'a'.charCodeAt(0);
let unicode16 = unicode10.toString(16); // 61
於是，前端領域字符表示方式又多了一員：
1. HTML中字符輸出使用&#x配上charCode值；
2. 在JavaScript文件中爲防止亂碼轉義，則是\u配上charCode值；
3. 而在CSS文件中，如CSS僞元素的content屬性，直接使用\配上charCode值。
4. unicode-range是U+配上charCode值。
2. unicode-range的常用值
漢字：[0x4e00,0x9fa5]（或十進制[19968,40869]）
數字：[0x30,0x39]（或十進制[48, 57]）
小寫字母：[0x61,0x7a]（或十進制[97, 122]）
大寫字母：[0x41,0x5a]（或十進制[65, 90]）
六、字體壓縮
自定義的字體文件一般都比較大，這時可以用字蛛進行壓縮。
字蛛官網是這麼介紹字蛛的：字蛛通過分析本地 CSS 與 HTML 文件獲取 WebFont 中沒有使用的字符，並將這些字符數據從字體中刪除以實現壓縮，同時生成跨瀏覽器使用的格式。
參考文章
