何时下载备用字体?
如果我将Google字体设置为备用字体,如下所示:
@font-face {
font-family: 'GoogleFont';
src: url('GoogleFont.ttf');
}
html, body {
font-family: 'myMainFont', 'GoogleFont';
}
如果主字体失败,Google字体是否仅下载到用户的浏览器?
解决方案
否:浏览器实现各不相同,因此您不能相信字体会被忽略(即使不需要它们)。
客户端的操作系统、浏览器和版本都会导致不同的性能--浏览器可能提供的其他设置也是如此。请参阅Adam's answer关于W3的"规则"的浏览器遵从性。在不同的浏览器中查看下载到您的浏览器here和here中的资源,以了解如何处理字体。
话虽如此,according to the MDN documentation如果您在@font-face
src
属性中指定了多个文件,就可以拥有您想要的"回退"行为:
@font-face {
font-family: MyFontName;
src: url("MyMainFont.tff"), url("MyBackupFont.ttf");
}
在this example中,如果找不到第一个文件,则向下继续src
列表,直到找到有效文件。因此,只有在找不到MyMainfont.tff
的情况下才会下载MyBackupFont.tff
。您还可以使用local("FontName")
在src
中指定本地文件。
顺便提一下,Chris has a great article关于如何"负责任地使用[@Font-Face]"
相关文章