引入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），不过貌似还没看到最佳实践（有轮子心的同窗们，机会来了！），有知道的同窗欢迎在评论中补充。