网页中用什么格式的字体 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

你可能感兴趣的:(网页中用什么格式的字体 eof/svg/ttf/woff/woff2 ?)