为什么我们要包括ttf, eot, woff, svg，…用字体

在CSS3 font-face中，包含了多种字体类型，如ttf， eot， woff， svg和cff。

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

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

170833 次浏览
小开
最佳答案

2019年的答案:

只使用WOFF2，如果需要遗留支持，则使用WOFF。不使用任何其他格式

(svg和eot是死格式，ttf和otf是完整的系统字体，不应该用于web目的)

2012年的原始答案:

简而言之，字体面是非常古老的，但直到最近才被更多的IE所支持。

  • eot适用于比IE9更老的Internet explorer浏览器——他们发明了这个规范，但eot是一个专有的解决方案。

  • ttf和otf是正常的旧字体，所以有些人很恼火，因为这意味着任何人都可以免费下载昂贵的授权字体。

  • 随着时间的推移，SVG 1.1增加了“字体”一章，解释了如何纯粹使用SVG标记对字体建模，人们开始使用它。过了一段时间，结果发现，与普通字体格式相比，它们是绝对糟糕的， SVG 2明智地再次删除了整个章节。

  • 然后，woff是由具有相当多领域知识的人发明的，这使得以一种丢弃对系统安装至关重要但与web无关的比特的方式托管字体成为可能(让人们担心盗版)，并允许内部压缩以更好地适应web的需求(让用户和主机高兴)。这成为首选格式。

  • 几年后，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');
}
可以在http://caniuse.com/woff
处检查对woff的支持 可以在http://caniuse.com/woff2

处检查对woff2的支持
小开

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

看看[死亡URL删除]。 你所看到的字体是实验性的web提供的smartfont (woff)，它有数千个组合字符组成复杂的形状。下面的文本是简单的罗马化辛格哈拉语的拉丁代码。(复制粘贴到记事本，查看).

只有woff能做到这一点，因为没有人有这种字体，但它在任何地方都能看到(Mac, Win, Linux，甚至智能手机上的所有浏览器，除了IE。IE不完全支持开放类型)。

小开

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 < / p >

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

基本上，你向woff2文件添加一个src url，并指定woff2格式。在使用woff-format之前使用它是很重要的:浏览器将使用它支持的第一种格式。


提交答案