344

在CSS3 font-face中，包括多种字体类型，如ttf、eot、和.woffsvgcff

为什么我们要使用所有这些类型？

如果它们对不同的浏览器是特殊的，为什么它们的数量比主要的网络浏览器的数量还要多？

4

3 回答 3

516

2019年的答案：

仅使用 WOFF2，或者如果您需要旧版支持，则使用 WOFF。不要使用任何其他格式

（svg并且eot是死格式，ttf是otf完整的系统字体，不应用于网络目的）

2012年的原始答案：

总之，font-face 很老了，不过最近才被IE 以上支持。

  • eot早于 IE9 的 Internet Explorer 需要 - 他们发明了规范，但 eot 是专有解决方案。

  • ttf并且otf是普通的旧字体，所以有些人很生气，这意味着任何人都可以免费下载昂贵的许可字体。

  • 随着时间的流逝，SVG 1.1 增加了一个“字体”一章，解释了如何纯粹使用 SVG 标记对字体进行建模，人们开始使用它。更多的时间过去了，事实证明，与普通字体格式相比，它们绝对是可怕的，而 SVG 2 明智地再次删除了整个章节。

  • 然后，woff由具有相当多领域知识的人发明，这使得以丢弃对系统安装至关重要但与网络无关的位的方式托管字体成为可能（让担心盗版的人感到高兴）和允许内部压缩以更好地满足 Web 的需求（使用户和主机满意）。这成为首选格式。

  • 2019 年编辑几年后，woff2被起草并接受，这改进了压缩，导致文件更小，以及“部分”加载单个字体的能力，以便支持 20 个脚本的字体可以存储为“块” " 而是在磁盘上，浏览器能够根据需要自动“部分”加载字体，而不是需要预先传输整个字体，进一步改善了排版体验。

如果您不想支持 IE 8 及更低版本、iOS 4 及更低版本以及 android 4.3 或更早版本，则可以只使用 WOFF（以及 WOFF2，一种更高压缩的 WOFF，适用于支持它的最新浏览器。）

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

woff可以在 http://caniuse.com/woff 上查看支持可以在http://caniuse.com/woff2
上查看 支持woff2

于 2012-06-12T18:45:56.360 回答
22

Woff 是 TrueType - OpenType 字体的压缩（压缩）形式。它很小，可以像图形文件一样通过网络传递。最重要的是，这种方式完全保留了字体，包括很少有人关心的渲染规则表，因为他们只使用拉丁文字。

看一看[已删除的死 URL]。您看到的字体是一种实验性的网络交付 smartfont (woff)，它有数千个组合字符组成复杂的形状。底层文本是罗马化僧伽罗语的简单拉丁代码。（复制并粘贴到记事本并查看）。

只有 woff 可以做到这一点，因为没有人拥有这种字体，但它可以在任何地方看到（Mac、Win、Linux 甚至智能手机上的所有浏览器，除了 IE。IE 不完全支持 Open Types）。

于 2013-05-26T19:28:06.237 回答
14

WOFF 2.0 基于 Brotli 压缩算法和对 WOFF 1.0 的其他改进，文件大小减少了 30% 以上，在 Chrome、Opera 和 Firefox 中受支持。

http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/有一个如何使用它的例子。

基本上，您将 src url 添加到 woff2 文件并指定 woff2 格式。在 woff 格式之前有这个很重要：浏览器将使用它支持的第一种格式。

于 2014-11-15T11:22:50.743 回答