css - 选择最理想的字体格式

Question

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

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

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

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

我的最低浏览器支持（现代浏览器）将是IE9+. 在这种情况下，当我从工具中选择该选项时，它会给出以下@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？

woff包含所有现代浏览器 (IE9+)的类型字体集还不够吗？

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

标签： cssfontsfont-facewebfonts

Answer 1

woff2 是现代“标准字体”，在现代浏览器上受支持。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。

回复：你的评论

为了测试性能，我上传了一个带有 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 行。