网页中用什么格式的字体 eof/svg/ttf/woff/woff2 ？

背景介绍

早期电脑显示的字体都是点阵字体，通过像素点标记字符，这种方式节省电脑运算量，但显示效果差，字体一旦放大就出现锯齿甚至马赛克问题。1980年代中期，苹果公司推出 Macintosh 电脑（Mac系列早期型号），在文字处理上使用新的矢量字体取代点阵字体，在文字显示效果上独领风骚。为了支持矢量字体，苹果定义了一套标准的字体数据结构格式：SFNT[1]。平滑的字体技术加上独立设计的新字体，也成为 Macintosh 畅销的卖点之一。

SFNT 发布后，Adobe公司紧接着发布了 Type 1 PostScript 字体，通过与 PostScript 系列工具的整合抢占市场。为了对抗 Adobe 的 PostScript，苹果设计开发了 TrueType 字体，后来微软也加入了 TrueType 的开发。事情后来的发展违背了苹果的预期，微软成功的把 TrueType 全面集成到 Windows3.1 中，而 Macintosh 电脑上却是 PostScript 成为主导字体。

1991年，微软与 Monotype 公司合作，制作了一批高质量 TrueType 字体，同时兼容PostScript字体集成进 Windows。

1994年，微软开发了 TrueType Open “智能字体”技术。

TrueType字体文件后缀名（*.ttf）

1996年，Adobe公司加入 TrueType Open 的开发，随后 TrueType Open 与 Adobe Type 1 合并并成立新项目：OpenType。

OpenType字体文件后缀名（*.otf）

1997年，微软发布的IE4中支持将压缩后的 OpenType 文件嵌入到浏览器（Embedded OpenType）的技术[4]。这标志这浏览器使用特定字体能力的开始。

Embedded OpenType字体文件后缀名（*.eot）

2006年，浏览器纷纷开始支持主流的 OpenType 字体标准。

2007年，OpenType 成为 ISO 标准，以ISO/IEC 14496-22发布。

2008年，W3C委员会拒绝了微软提出的将Embedded OpenType字体作为标准的提案。

2009年，Mozilla 开始测试一种 OpenType 的字体压缩技术：Web Open Font Format（简称WOFF）。同年，Mozilla、Opera、微软共同向W3C提交 WOFF提案。

Web Open Font Format字体文件后缀名（*.woff）

2010年，W3C将WOFF发布为草案，并进行推广 。

WOFF 压缩格式的2个特点：

1. 利用压缩技术有效减小文件大小。
2. 不加密、不受DRM（数字著作权）限制。

2014年，WebFont 工作组发布了 WOFF2 草案。同年，Chrome 38 版本移除了对 SVG 字体的支持。

2018年，WOFF2标准成为 W3C 推荐标准。

浏览器兼容性

eot字体

ttf字体

svg字体

woff字体

woff2字体

浏览器字体引用方式

目前的字体库主要通过字体工具生成（比如 百度字体工具），并直接使用字体工具提供的CSS引用方法。字体工具为了兼容，会包含不同的字体文件，典型的引用方式如图

CSS引用字体文件

而实际上，考虑到 woff2 在浏览器的兼容性上已经表现的足够好。完全可以只使用 woff2 这一种字体。当然，如果你还要兼容IE，那么还需要使用eot字体。

结论

• eot：IE系列专属字体方案，不推荐。
• svg：不是真的字体，存在很多兼容问题，已经被大部分浏览器抛弃，不推荐。
• ttf：兼容性好，但是字体文件较大 ，不推荐。
• woff：W3C标准，兼容性好，推荐。
• woff2：W3C标准，但是不兼容IE，推荐。

备注：在IE上其实可以使用退化兼容方案，也就是在页面中只使用 woff2 字体，IE不识别，无法使用，也仅是使用浏览器默认字体，不影响页面功能。

引用

[1] https://zh.wikipedia.org/wiki/SFNT
[2] https://zh.wikipedia.org/wiki/TrueType
[3] https://www.iso.org/standard/43466.html
[4] https://en.wikipedia.org/wiki/Web_typography#History
[5] https://web.archive.org/web/20100309062544/http://people.mozilla.org/~jkew/woff/woff-spec-latest.html