我们为什么要在font-face中包含ttf,eot,woff,svg,....

Question

在CSS3 font-face,有多个字体类型包括等ttf,eot,woff,svg和cff.

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

如果它们对于不同的浏览器是特殊的,为什么它们的数量大于主要Web浏览器的数量？

Answer 1

简而言之,font-face很老,但最近才得到IE以上的支持.

如果您不想支持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');
}

为支持ttf可在检查http://caniuse.com/woff
支持otf可以在检查http://caniuse.com/woff2

*`woff` ...有一种模式可以阻止人们盗版字体*？这究竟是如何工作的？ (70认同)
TTF不应该比WOFF轻.WOFF是TrueType的压缩形式 - OpenType字体(ttf和otf). (12认同)
iOS 5确实支持WOFF. (8认同)
WOFF的观点不是反盗版.[TypeKit](http://blog.typekit.com/2010/12/02/the-benefits-of-opentypecff-over-truetype/)说,"OpenType/CFF字体优于TrueType字体的两个主要好处是1 )它们的文件较小,2)它们需要的暗示信息要少得多,以便在允许某种形式的抗锯齿的环境中很好地呈现." (7认同)
@Zelphir工具很难用这个标志创建可嵌入字体,而你的一流设计师是编程文盲,如果有人设计了一个带有闪亮"盗版字体"按钮的Mac应用程序,则只能删除标记.此外,如果他们是公司,您可以提起法律诉讼.如果他们是一个有博客的人,与他们交谈,失败,他们的主人等等 - 但请记住,无论如何不能购买你的字体的人都不是潜在的消费者,所以我要说免费宣传更值得而不是说服他们只是换掉最接近dafont的东西的麻烦. (7认同)
使用@Marcel第一个支持的格式,因此如果支持,将使用WOFF2. (2认同)

Answer 2

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

看看[删除了死网址].你看到的字体是一个实验性网站,它提供了smartfont(woff),它有数千个组合字符,形成复杂的形状.基础文本是罗马化Singhala的简单拉丁语代码.(复制并粘贴到记事本并查看).

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

Answer 3

WOFF 2.0基于Brotli压缩算法和WOFF 1.0的其他改进,文件大小减少了30%以上,Chrome,Opera和Firefox都支持.

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