CSS 为什么我们要在字体中包含 ttf、eot、woff、svg...
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11002820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why should we include ttf, eot, woff, svg,... in a font-face
提问by user16948
In CSS3font-face, there are multiple font types included like ttf, eot, woff, svgand cff.
在CSS3font-face，有包括如多发性字体类型ttf，eot，woff，svg和cff。
Why should we use all of these types?
为什么我们要使用所有这些类型？
If they are special to different browsers, why is the number of them greater than the number of the major web browsers?
如果它们是针对不同浏览器的，为什么它们的数量比主要网络浏览器的数量多？
回答by Rich Bradshaw
Answer in 2019:
2019年的回答：
Only use WOFF2, or if you need legacy support, WOFF. Do not use any other format
仅使用 WOFF2，或者如果您需要传统支持，请使用 WOFF。不要使用任何其他格式
(svgand eotare dead formats, ttfand otfare full system fonts, and should not be used for web purposes)
（svg并且eot是死格式，ttf并且otf是完整的系统字体，不应用于网络目的）
Original answer from 2012:
2012年的原始答案：
In short, font-face is very old, but only recently has been supported by more than IE.
总之，font-face 很老了，但直到最近才被超过 IE 支持。
eotis needed for Internet Explorers that are older than IE9 - they invented the spec, but eot was a proprietary solution.ttfandotfare normal old fonts, so some people got annoyed that this meant anyone could download expensive-to-license fonts for free.Time passes, SVG 1.1 adds a "fonts" chapter that explains how to model a font purely using SVG markup, and people start to use it. More time passes and it turns out that they are absolutely terriblecompared to just a normal font format, and SVG 2 wisely removes the entire chapter again.
Then,
woffgets invented by people with quite a bit of domain knowledge, which makes it possible to host fonts in a way that throws away bits that are critically important for system installation, but irrelevant for the web (making people worried about piracy happy) and allows for internal compression to better suit the needs of the web (making users and hosts happy). This becomes the preferred format.2019 editA few years later,
woff2gets drafted and accepted, which improves the compression, leading to even smaller files, along with the ability to load a single font "in parts" so that a font that supports 20 scripts can be stored as "chunks" on disk instead, with browsers automatically able to load the font "in parts" as needed, rather than needing to transfer the entire font up front, further improving the typesetting experience.
eotIE9 之前的 Internet Explorer 需要 - 他们发明了规范，但 eot 是专有解决方案。ttf并且otf是普通的旧字体，所以有些人对这意味着任何人都可以免费下载昂贵的许可字体感到恼火。随着时间的流逝，SVG 1.1 添加了“字体”一章，解释了如何纯粹使用 SVG 标记对字体进行建模，人们开始使用它。更多的时间过去了，结果证明与普通字体格式相比，它们绝对糟糕透了，SVG 2 再次明智地删除了整个章节。
然后，
woff由具有相当多领域知识的人发明，这使得托管字体成为可能，这种方式可以丢弃对系统安装至关重要但与网络无关的位（让担心盗版的人感到高兴）和允许内部压缩以更好地满足网络的需求（让用户和主机满意）。这成为首选格式。2019 edit几年后，
woff2起草并接受，这改善了压缩，导致文件更小，并且能够“分批”加载单个字体，以便支持 20 个脚本的字体可以存储为“块” " 改为在磁盘上，浏览器可以根据需要自动加载“部分”字体，而不需要预先传输整个字体，进一步改善了排版体验。
If you don't want to support IE 8 and lower, and iOS 4 and lower, and android 4.3 or earlier, then you can just use WOFF (and WOFF2, a more highly compressed WOFF, for the newest browsers that support it.)
如果您不想支持 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');
}
Support for woffcan be checked at http://caniuse.com/woff
Support for woff2can be checked at http://caniuse.com/woff2
支持woff可以在http://caniuse.com/woff上查看
支持woff2可以在http://caniuse.com/woff2上查看
回答by user2422970
Woff is a compressed (zipped) form of the TrueType - OpenType font. It is small and can be delivered over the network like a graphic file. Most importantly, this way the font is preserved completely including rendering rule tables that very few people care about because they use only Latin script.
Woff 是 TrueType - OpenType 字体的压缩（压缩）形式。它很小，可以像图形文件一样通过网络传送。最重要的是，这种方式完全保留了字体，包括很少有人关心的渲染规则表，因为他们只使用拉丁文字。
Take a look at [dead URL removed]. The font you see is an experimental web delivered smartfont (woff) that has thousands of combined characters making complex shapes. The underlying text is simple Latin code of romanized Singhala. (Copy and paste to Notepad and see).
看看[删除了无效网址]。你看到的字体是一个实验性的网络交付的智能字体 (woff)，它有数千个组合字符，形成复杂的形状。底层文本是简单的罗马化新加坡语拉丁语代码。（复制并粘贴到记事本并查看）。
Only woff can do this because nobody has this font and yet it is seen anywhere (Mac, Win, Linux and even on smartphones by all browsers except by IE. IE does not have full support for Open Types).
只有 woff 可以做到这一点，因为没有人拥有这种字体，但它可以在任何地方看到（Mac、Win、Linux 甚至在智能手机上，除了 IE 之外的所有浏览器。IE 不完全支持开放类型）。
回答by Jyrki Alakuijala
WOFF 2.0, based on the Brotli compression algorithm and other improvements over WOFF 1.0 giving more than 30 % reduction in file size, is supported in Chrome, Opera, and Firefox.
WOFF 2.0 基于 Brotli 压缩算法和对 WOFF 1.0 的其他改进，文件大小减少了 30% 以上，Chrome、Opera 和 Firefox 支持。
http://en.wikipedia.org/wiki/Web_Open_Font_Formathttp://en.wikipedia.org/wiki/Brotli
http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli
http://sth.name/2014/09/03/Speed-up-webfonts/has an example on how to use it.
http://sth.name/2014/09/03/Speed-up-webfonts/有一个关于如何使用它的例子。
Basically you add a src url to the woff2 file and specify the woff2 format. It is important to have this before the woff-format: the browser will use the first format that it supports.
基本上，您将 src url 添加到 woff2 文件并指定 woff2 格式。在 woff-format 之前使用它很重要：浏览器将使用它支持的第一种格式。
