引入font-face無論用

@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），不過貌似還沒看到最佳實踐（有輪子心的同窗們，機會來了！），有知道的同窗歡迎在評論中補充。