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+的这个定义，转换为“现代浏览器”。看font type support这是一个很大的混乱，虽然似乎是IE8。查看网站“我可以使用”所有现代浏览器都支持woff和svg格式。

那么为什么我们要添加所有这三种格式，我们只需要一种，因为所有现代浏览器都支持woff或svg？我不明白的是订单很重要。因此，在上面的示例中，所有现代浏览器都将下载“woff”格式。没有必要添加svg。那我们为什么这样做呢？

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

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

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

所以，我刚刚做了一堆假设。有没有理由添加所有这些？你大多使用woff或svg逃脱了吗？

Answer 1

你几乎自己回答了所有问题。：）

这是一本可能有用的好读物：

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

Re SVG字体，我认为旧版iOS上的Safari仅支持SVG webfonts。这就是它在食谱中变得流行的原因。 EOT是老IE。 TTF是pre-woff非IE。这些天还有woff2，Chrome，Opera和Firefox的非发布版本都支持。

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

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

1 个答案: