只加载在该页面中使用的@ 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屋！