html - 仅加载该页面中使用的@font-face

标签 html css font-face

我的样式表中有多个@font-face 字体,有没有办法只加载该页面上使用的字体?除了为具有该字体的每个页面加载单独的样式表之外。

最佳答案

我不知道浏览器是如何真正实现它的,但是 CSS Fonts Module Level 3在其“Font loading guidelines”部分中说,浏览器必须只下载当前页面中使用的字体:

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.

因此,无论如何,您不能在您的代码中指定任何特定行为,如果浏览器兼容,它将只下载每个页面所需的行为。

另一个考虑因素是浏览器是否会下载当前页面中声明的字体作为后备但并未真正使用。在这种情况下,规范说它是可选的:

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.

关于html - 仅加载该页面中使用的@font-face,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9690214/

相关文章:

asp.net - CSS文件中的div.classname

Jquery UI 可拖动和可交换

javascript - 使导航项在事件时改变颜色

javascript - 检测div的位置

javascript - 如何强制运行 swf 文件,而不是下载

css - @font-face 仅在 Chrome 浏览器中不起作用

html - @font-face : in CSS isn't working

html - Raleway 字体仅在 Windows 上向文本顶部添加额外的填充

css - 溢出-x : hidden also hides vertical content too

html - HTML/CSS 中两个表格单元格之间的边框