在CSS3 font-face中,有多种字体类型,如ttf, eot, woff, svg和cff。

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

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


当前回答

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

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

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

其他回答

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

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

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

2019年的答案:

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

(svg和eot是死格式,TTF和otf是完全系统字体,不应该用于web目的)

2012年的原始答案:

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

eot is needed for Internet Explorers that are older than IE9 - they invented the spec, but eot was a proprietary solution. ttf and otf are 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 terrible compared to just a normal font format, and SVG 2 wisely removes the entire chapter again. Then, woff gets 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 edit A few years later, woff2 gets 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.

如果你不想支持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上查看 对woff2的支持可以在http://caniuse.com/woff2上查看

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/有一个如何使用它的例子。

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