【发布时间】：2012-03-14 03:40:08
【问题描述】：
我的样式表中有多个@font-face 字体，有没有办法只加载该页面上正在使用的字体？除了为具有该字体的每个页面加载单独的样式表。
【问题讨论】：
【发布时间】：2012-03-14 03:40:08
【问题描述】：
我不知道浏览器是如何真正实现它的，但CSS Fonts Module Level 3 在其“Font loading guidelines”部分中说，浏览器必须只下载当前页面中使用的字体 ：
@font-face 规则旨在允许延迟加载字体，仅在需要在文档中使用时才下载字体。样式表可以包含一个字体库的@font-face 规则，其中仅使用一个选择集；用户代理必须只下载那些在适用于给定页面的样式规则中引用的字体。下载@font-face 规则中定义的所有字体而不考虑这些字体是否实际上在页面中使用的用户代理被视为不符合要求。
所以，无论如何，在你的代码中你不能指定任何特定的行为，如果浏览器是兼容的，它只会下载每个页面所需的那些。
另一个考虑因素是浏览器是否会下载当前页面中声明的字体作为后备但并未真正使用。在这种情况下，规范说它是可选的：
如果字体可能在字符后备情况下被下载，用户代理可能会下载一种字体，如果它在字体列表中列出但实际上并未用于给定的文本运行。
【讨论】：
-
感谢您提供此信息。我将花一些时间在不同的浏览器中访问并再次检查加载文件。感谢您的帮助
-
我今天刚刚对此进行了测试，这是我的结果：Firefox v26 和 Chrome v32 都只下载用于样式元素的字体。您可以拥有任意数量的
@font-face声明，但它们只会加载必要的声明。另一方面，Internet Explorer v11 会加载已定义的 ALL 字体，无论它们是否实际使用。即使是最新版本的 IE（在撰写本文时）也是“不符合标准的”。
您可以只在页面中加载字体，这将覆盖 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>
【讨论】：
-
这是一个@font 脸，而不是谷歌字体，希望我不必加载单独的样式表。我希望有一种方法可以只加载该页面的 CSS 中定义的字体