选择最理想的字体格式

Question

我应该使用 Google 字体库中的 Nunito [»] 字体系列。

由于站点速度性能等一些改进以及独立性等问题，我需要在本地运行这项技术。

<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">

我为此使用了这个工具：google-webfonts-helper [»]

我的最低浏览器支持（现代浏览器）将是 IE9+。在这种情况下，当我从工具中 select 该选项时，它会给出以下 @font-face 块。

/* nunito-regular - latin-ext_latin_cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'),
       url('../fonts/nunito-v12-latin-ext_latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nunito-v12-latin-ext_latin_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

由于项目的打开速度是我们的首要目标，因此牢记一些问题。

如您所见，此代码尝试加载 woff 和 woff2 字体。我想到的是，既然我包含了 woff，我为什么要尝试包含 woff2？

包含适用于所有现代浏览器 (IE9+) 的 woff 类型字体集是否足够？

最后，我了解到 IOS 基于操作系统的设备使用 ttf 字体。事实上，当我只使用 woff 时，我的最低 IOS 支持是多少？

Answer 1

woff2 是现代的 "standard font" 并且受现代浏览器支持。 Woff2 是一种压缩程度更高的字体，因此 woff2 文件比 woff 文件小。为了支持现代和一些较旧的浏览器，woff2 和 woff 文件都必须存在。优先询问设备上是否存在该字体，如果不存在则存在Woff2，如果woff2失败，则加载woff字体。

如果看性能，woff2 是最好的选择。 woff 是旧版浏览器的后备。

请注意，并非同时加载了 woff2 和 woff。如果支持 woff2，浏览器只会加载 woff2。另一方面，如果不支持 woff2，则只加载 woff。两者都展示是最好的选择。

WOFF2 : modern browsers
WOFF  : fallback if woff2 is not supported
TTF   : Android-browser on Android 4.3 or older
EOT   : Internet Explorer 8 or older
SVG   : iOS-Safari 3.2-4.1. SVG webfonts are not supported anymore in most browsers

请注意，svg 文件是巨大的文件，如果您正在进行性能优化，这是一种不好的做法。

因此，为了获得最佳性能和非常好的跨浏览器演示，woff2 和 woff 就足够了。您的 css 看起来不错，首先检查本地，然后尝试 woff2，然后，如果 woff2 失败，则回退到 woff。

RE: 你的评论

为了测试性能，我上传了一个带有 Font-Awsome 和 Open-Sans 的 Bootstrap 页面。这些 webfont 文件位于我域中的子文件夹中。每种字体都有这个优先级：

src: local('Open Sans Italic'),
     local('OpenSans-Italic'),
     url('../webfonts/OpenSans/OpenSans-Italic.woff2') format('woff2'),
     url('../webfonts/OpenSans/OpenSans-Italic.woff') format('woff'),
     url('../webfonts/OpenSans/OpenSans-Italic.ttf') format('truetype');

瀑布图显示从每个 webfont 中只加载了 woff2。如果您不必在 Android 4.3 或更早版本上支持旧的 'Android-browser'，则从这个 css 示例中删除 TTF 行。

选择最理想的字体格式

Choosing the most ideal font format

css

fonts

font-face

webfonts