svg - 为什么我们要载入如此多的字体格式？

Question

典型的@font-face 设置：

@font-face {
 font-family: 'myFont';
 src: url('/fonts/myFont.woff') format('woff'),
 url('/fonts/myFont.ttf') format('ttf'),
 url('/fonts/myFont.svg') format('svg'),
 url('/fonts/myFont.eot') format('eot')
}

现在，我们有了 IE 9 +的定义，它转换为"现代浏览器"。 看看字体类型的支持，它是一个巨大的混乱，虽然，看起来是用来。 查看站点"我可以用"，所有的现代浏览器都支持woff和svg格式。

那么为什么我们要添加这三种格式，我们只需要一个，现代浏览器都支持woff或者 svg？ 我不明白的是订单的问题。 所以在示例 above 中，所有现代浏览器都将下载"woff"格式。 不需要添加 svg 。 那我们为什么要这样做？

这个问题的background 是 inline 优化。 如果我想把字体当作Base64字符串，那么这不是很好的"optimizely"，这将只会使CSS不必要的大的大。

如果目标是"现代浏览器"，只需选择字体支持的格式并坚持。 不要忘记web上"每个例子"的回退使用。

或许有些格式在某些浏览器中比其他格式更好，但是，因为浏览器会在你的font-face 列表中只下载第一个支持格式，或者在你的列表中，如果你不关心 IE，那么ttf将是第一个。

所以我在这里做了一些假设。 有什么理由把它们都加起来？ 大多数情况下，使用woff或者 svg？

Answer 1

你几乎全部回答了你的问题。 : )

下面是一个很好的阅读方法：

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=en

我觉得Safari在老版本的iOS上只支持 SVG webfonts 。 这就是为什么它在食谱中流行的原因。 EOT为旧 IE，TTF为 pre-woff 。 这些日期也有 woff2，它在 Chrome 。Opera 和 Firefox的非发布版本中支持。

对于内联字体数据，你需要检测浏览器并发送最受支持的版本。