只加载在该页面中使用的@ font-face [英] only load @font-face being used in that page
问题描述
我的样式表中有多个@ font-face字体,有没有方法只加载那个页面上使用的字体?除了为包含该字体的每个页面加载单独的样式表。
I have multiple @font-face fonts in my stylesheet, is there a way of only load the ones being used on that page? Other than loading a separate stylesheet for each page that features that font.
推荐答案
我不知道浏览器如何真正实现,但 CSS字体模块级别3 在其字体加载准则部分,浏览器必须只下载使用的字体在当前页中:
I don't know how browsers are really implementing it, but CSS Fonts Module Level 3 says in its "Font loading guidelines" section, that browsers must download only the fonts that are used in the current page:
@ font-face规则旨在允许延迟加载字体,仅下载字体当需要在文档中使用时。样式表可以包括用于仅使用选择集的字体库的@字体表面规则;用户代理只能下载在适用于给定页面的样式规则中引用的那些字体。用户代理下载在@ font-face规则中定义的所有字体,而不考虑这些字体是否实际上在页面中使用。
The @font-face rule is designed to allow lazy loading of fonts, fonts are only downloaded when needed for use within a document. A stylesheet can include @font-face rules for a library of fonts of which only a select set are used; user agents must only download those fonts that are referred to within the style rules applicable to a given page. User agents that download all fonts defined in @font-face rules without considering whether those fonts are in fact used within a page are considered non-conformant.
因此,无论如何,在您的代码中,您不能指定任何特定的行为,如果浏览器兼容,它将只下载每个页面所需的。
So, anyway, in your code you can't specify any specific behavior, and if the browser is compliant, it will download only the ones required for each page.
另一个考虑因素是,如果浏览器会下载在当前页面中声明的字体作为后备,但没有真正使用。在这种情况下,规范说它是可选的:
Another consideration is if browsers will download fonts declared in the current page as a fallback but not really used. In this case, the specification says it is optional:
如果字体可能会在字符回退的情况下下载,用户代理可能会下载如果字体在字体列表中列出,但实际上不用于给定的文本运行。
In cases where a font might be downloaded in character fallback cases, user agents may download a font if it's listed in a font list but is not actually used for a given text run.
这篇关于只加载在该页面中使用的@ font-face的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!