When is a fallback font downloaded?(何时下载备用字体?)
本文介绍了何时下载备用字体?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如果我将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]"
这篇关于何时下载备用字体?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:何时下载备用字体?


猜你喜欢
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- addEventListener 在 IE 11 中不起作用 2022-01-01
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- Fetch API 如何获取响应体? 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- 失败的 Canvas 360 jquery 插件 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- 400或500级别的HTTP响应 2022-01-01
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01