什么时候下载了后备字体？

Question

如果我将Google字体设置为后备字体,如下所示:

@font-face {
    font-family: 'GoogleFont';
    src: url('GoogleFont.ttf');
}

html, body {
    font-family: 'myMainFont', 'GoogleFont';
}

如果主字体失败,Google字体是否只会下载到用户的浏览器？

Answer 1

否：浏览器的实现各不相同，因此您不能相信字体会被忽略（即使不需要它们）。

客户端的操作系统、浏览器和版本都会导致性能差异——浏览器可能提供的其他设置也是如此。请参阅Adam关于 W3“规则”的浏览器合规性的回答。

在不同浏览器中检查在浏览器中下载的资源（此处）和此处（此处），以了解如何处理字体。

话虽这么说，根据 MDN 文档，如果您在属性中指定多个文件，则可以获得您正在寻找的“后备”行为@font-face src：

@font-face {
  font-family: MyFontName;
  src: url("MyMainFont.tff"), url("MyBackupFont.ttf");
}

在此示例中，如果未找到第一个文件，则我们继续沿着src列表向下查找，直到找到有效文件。因此，MyBackupFont.tff仅在MyMainfont.tff找不到时才下载。您还可以src使用指定本地文件local("FontName")。

顺便说一句，克里斯有一篇关于如何“负责任地使用 [@font-face]”的精彩文章。