@charset "UTF-8";
@charset "UTF-8";
@font-face {
font-family: "subfont";
src: url("subfont.eot"); /* IE9 */
src: url("subfont.eot") format("embedded-opentype"), /* IE6-IE8 */
url("subfont.woff2") format("woff2"),
url("subfont.woff") format("woff"), /* chrome、firefox */
url("subfont.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url("subfont.svg") format("svg"); /* iOS 4.1- */
font-weight: normal;
font-style: normal;
}
這里我們引用的ttf woff 不可能引入真真的字體庫，而是去了子集
https://www.fontke.com/tool/subfont/ 在這里把用此字體的子 生成出來
然后在在上傳到 https://www.fontke.com/tool/fontface/
生成@font-face,我在昨天測試的時候發現不管用,測試半天，結果發現生成出來的是
src: url("subfont.woff");
我到現在還不敢確定是不是每個瀏覽器讀的不一樣，我用生成出來的次序測試了幾個瀏覽器都根本不加載字庫,然而我把 .eot 放到最前面就好了，所以我不敢確定是不是有固定格式必須 是 如上面代碼。（ps 反正生成出來的代碼確實排序woff最前面）
TTF
TTF (TrueType Font) 字體格式是由蘋果和微軟為 PostScript 而開發的字體格式。在 Mac 和 Windows 操作系統上，TTF 一直是最常見的格式，所有主流瀏覽器都支持它。然而，IE8 不支持 TTF；且 IE9 上只有被設置成 "installable" 才能支持（譯注：別想了，轉別的格式吧）。
TTF 允許嵌入最基本的數字版權管理標志————內置標志可以告訴我們字體作者是否允許改字體在 PDF 或者網站等處使用，所以可能會有版權問題。另一個缺點是，TTF 和 OTF 字體是沒壓縮的，因此他們文件更大。
OTF
OTF (OpenType Font) 由 TTF 演化而來，是 Adobe 和微軟共同努力的結果。OTF 字體包含一部分屏幕和打印機字體數據。OTF 有幾個獨家功能，包括支持多平台和擴展字符集。OTF 字體可以在 Macintosh 和 Windows 系統上使用。
OTF 也允許多達 65000 個字符的存儲。這個額外的空間讓設計師可以自由地添加附加元素，比如小帽子、老式數字體、代替的字符和其他一些以前必須作為獨立字體分發的附加材料。
（譯注：蘋果當年為了對抗 Adobe 在 PostScript 的 Type 1 字體拉上了微軟一起擼了 TTF，結果后來微軟又反水跟 Adobe 搞一套 OTF，還讓 IE 后面的版本取消 TTF 支持，IT圈子還真是亂。。）
EOT
EOT (Embedded Open Type) 字體是微軟設計用來在 Web 上使用的字體。是一個在網頁上試圖繞過 TTF 和 OTF 版權的方案。你可以使用微軟的工具從現有的 TTF/OTF 字體轉成 EOT 字體使用，其中對字體進行壓縮和裁剪使得文件體積更小。同時為了避免一些收版權保護的字體被隨意復制，EOT 還集成了一些特性來阻止復制行為，以及對字體文件進行加密保護。聽起來很有前途？嗯哼，可惜 EOT 格式只有 IE 支持。
（譯注：微軟曾經弄死網景的惡意競爭引起了公憤，在 IE 上推行孤立主義的微軟遭到整個行業的唾棄）
WOFF
WOFF (Web Open Font Format) 本質上是 metadata + 基於 SFNT 的字體（如 TTF、OTF 或其他開放字體格式）。該格式完全是為了 Web 而創建，由 Mozilla 基金會、微軟和 Opera 軟件公司合作推出。 WOFF 字體均經過 WOFF 的編碼工具壓縮，文件大小一般比 TTF 小 40%，加載速度更快，可以更好的嵌入網頁中。metadata 允許在字體文件中包含許可數據，以解決版權問題。這是萬維網聯盟提（qing）倡（ding）的，所以毫無疑問的是字體格式的未來。目前主流的瀏覽器的新版本幾乎都支持 WOFF。
WOFF2 是 WOFF 的下一代。 WOFF2 格式在原有的基礎上提升了 30% 的壓縮率。由於它還沒有 WOFF 的廣泛支持，所以還只是一個可展望的升級。
SVG
SVG (Scalable Vector Graphics font) 字體格式使用 SVG 的字體元素定義。這些字體包含作為標准 SVG 元素和屬性的字形輪廓，就像它們是 SVG 映像中的單個矢量對象一樣。SVG 字體最大的缺點是缺少字體提示（font-hinting）。字體提示是渲染小字體時為了質量和清晰度額外嵌入的信息。同時，SVG 對文本（body text）支持並不是特別好。因為 SVG 的文本選擇（text selection）目前在 Safari、Safari Mobile 和 Chrome 的一些版本上完全崩壞，所以你不能選擇單個字符、單詞或任何自定義選項，你只能選擇整行或段落文本。
然而，如果你的目標是 iPhone 和 iPad 用戶，需要說 SVG 字體是 iOS 上 Safari 4.1 以下唯一允許的字體格式。
明智的選擇 ⁼̴̀ .̫ ⁼̴́ )✧
正如你所看到的，有許多因素可能會影響 Web 字體的呈現。為了提供質量和一致性，對所有可能的 OS 和瀏覽器組合進行徹底測試是至關重要的。
譯者能想到的無非是造一些 xx2woff（主流兼容）、xx2eot（兼容 IE）、xx2svg （向下兼容 Safari）之類的輪子然后在 webpack 中配置（在 npm 上看了下確實有已經有不少的輪子了, 2333），不過貌似還沒看到最佳實踐（有輪子心的同學們，機會來了！），有知道的同學歡迎在評論中補充。