为什么我们要加载这么多字体格式？答案

【问题标题】：Why are we loading so many font formats?为什么我们要加载这么多字体格式？
【发布时间】：2015-02-12 03:12:14
【问题描述】：

典型的@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+ 的定义，它翻译为“现代浏览器”。看着font type support 这是一团糟，虽然eot 似乎是针对IE8 的。查看网站“我可以使用”所有现代浏览器都支持 woff 和 svg 格式。

那么为什么我们要添加所有这三种格式，我们只需要一种，因为所有现代浏览器都支持 woff 或 svg？我也不明白顺序很重要。所以在上面的例子中，所有现代浏览器都会下载“woff”格式。无需添加 svg。那么我们为什么要这样做呢？

这个问题的背景是内联优化。如果我想将我的字体作为 Base64 字符串包含在内，那么内联所有三种字体格式并不是很“优化”，它只会使 CSS 变得不必要的大。

因此，如果您的目标是“现代浏览器”，只需选择字体支持的格式并坚持使用即可。忘记网络上“每个示例”都使用的这种备用方法。

也许某些格式在某些浏览器中看起来比其他格式更好，但这并不重要，因为无论如何浏览器只会下载第一个支持的格式，在“现代浏览器”中，它总是会成为字体列表中的第一个 woff 或 svg，或者 ttf 如果你不关心 IE。

所以，我在这里做了一堆假设。真的有理由添加所有这些吗？您大多使用 woff 或 svg 来逃避？

【问题讨论】：

没有现代浏览器支持 SVG 字体。
谢谢，更新了问题，虽然只有 FireFox 不支持它。至少由我使用的来源说明。
来源已过时且错误。 blog.chromium.org/2014/08/…
也找到了这个，socialcompare.com/en/comparison/…，天哪……你知道有没有针对通用格式完成的工作？似乎 WOFF 是一种适用于所有东西的格式，除了歌剧。 (caniuse.com/#feat=woff)
如果您问我们是否可以忽略“旧”浏览器（对于“旧”的某些值），那么这太宽泛或主要基于意见，或两者兼而有之。如果没有，很难看出你在问什么。你的实际编程问题是什么？

标签： css svg fonts truetype woff

【解决方案1】：

您几乎自己回答了所有问题。 :)

关于 SVG 字体，我认为旧版本 iOS 上的 Safari 仅支持 SVG 网络字体。这就是它在食谱中流行的原因。 EOT 是旧的 IE。 TTF 是 pre-woff 非 IE。最近还有 woff2，它在 Chrome、Opera 和 Firefox 的非发布版本中受支持。

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

【讨论】：

呵呵，感谢您的评论和链接！这让我平静下来;-)