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

  显示原文与译文双语对照的内容
0 0

典型的@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?

时间:原作者:6个回答

0 0

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

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

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的非发布版本中支持。

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

原作者:
...