logo标签列表

只加载页面中使用的@font-face字体。

htmlcssfont-face
12

我在样式表中使用了多个@font-face字体，有没有一种方法只加载在该页面上使用的字体？除了为每个使用该字体的页面加载单独的样式表。

2个回答
19
我不知道浏览器是如何真正实现的，但是 CSS字体模块第3级 在其“字体加载指南”部分中规定，浏览器必须仅下载当前页面使用的字体：
引用如下： @font-face规则旨在允许惰性加载字体，仅当文档中需要使用字体时才会下载。样式表中可以包括@font-face规则，用于一组字体库，其中仅使用了一组选择集；用户代理必须仅下载那些与适用于给定页面的样式规则相关联的字体。下载所有在@font-face规则中定义而没有考虑这些字体是否实际上在页面中使用的用户代理被认为是不符合规范的。
因此，在您的代码中无法指定任何特定的行为，如果浏览器遵守规范，它将仅下载每个页面所需的字体。
另一个考虑因素是，如果浏览器将在当前页面声明但实际未使用的字体作为备选，是否会下载这些字体。在这种情况下，规范说这是可选的。
引用如下： 在字符回退情况下可能会下载字体的情况下，用户代理可以下载指定在字体列表中但实际上未用于给定文本运行的字体。
谢谢你提供这些信息。我会花一些时间在不同的浏览器中进行访问，并再次检查加载文件。感谢你的帮助。 - Hue
6
我今天刚测试了一下，这是我的结果：Firefox v26和Chrome v32只有在应用于样式元素时才下载字体。你可以有任意多的@font-face声明，但它们只会加载必要的那些。另一方面，Internet Explorer v11会加载所有定义的字体，而不管它们是否实际使用。即使是最新版本的IE（截至我写这篇文章），也是“非一致”的。 - Jesse Webb
-4

你可以在页面中加载字体，这将覆盖CSS中指定的字体。

例如：

<head>
<link href='http://fonts.googleapis.com/css?family=Krona+One' rel='stylesheet' type='text/css'>
</head>

<body style="font-family: 'Krona One', sans-serif;">
CONTENT
</body>
1
这是针对@font-face而不是Google字体的，希望我不必加载单独的样式表。我希望有一种方法只加载在该页面CSS中定义的字体。 - Hue
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接