1

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

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

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

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

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

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

4

1 回答 1

2

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

这是一个很好的阅读，可能会有所帮助：

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

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

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

于 2014-12-16T08:09:41.460 回答