@font-face {
 font-family: 'example';
 src: url(example.ttf);
 font-style: normal;
 font-weight: normal;
 unicode-range: U+0025-00FF;
 font-variant: small-caps;
 font-stretch: expanded;
 font-feature-settings："liga1" on;
} 

font-variant、font-stretch 和 font-featuresettings專門為英文設計

src 如果是使用系統安裝字型， 則使用 local()功能符；如果是使用外鏈字型，則使用 url()功能符

font-weight:normal 和 font-style:normal，如果你 沒有同字型名的多字型設定，則它就是多餘的

format()功能符的作用是讓瀏覽器提前知道字型的格式，以決定是否需要載入這個字型，而 不是載入完了之後再自動判斷

font-style 和 font-weight 規則類似，在同名字型中選擇不同字重和樣式的字型

font-weight 被委以重任來實現“響應式圖示”

unicode-range 的作用是可以讓特定的字元或者特定範圍的字元使用指定的字型

字型圖示技術的原理

替換對應Unicode編碼的內容

弊端

（1）原始字元和生成的字元差距大，載入緩慢時能夠看到變化效果，解決方案：內聯字型檔案

（2）原始字元和生成的字元x-height不一樣，會出現閃動

（3）原始字元的 ch 寬度，也就是水平佔據的寬度和最終的圖形也是不一樣的，會出現晃動

解決

設定指定寬度

.icon {
 display: inline-block;
 width: 20px;
 text-align: center;
 font-family: ICON;
} 

使用工具生成圖示字型

（1）純路徑，純向量，不要有 base64 內聯圖形。

（2）使用填充而非描邊，也儘量避免使用一些高階的路徑填充覆蓋技巧。

（3）寬高尺寸最好都大於 200，因為字型生成的時候，座標值會四捨五入，SVG 尺寸過小 會導致座標取值偏差較大，使最終的圖示不夠精緻。