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

Hue*_*Hue 6 html css css3 font-face

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

Wai*_*... 12

我不知道浏览器是如何实现它的,但CSS字体模块3级在其" 字体加载指南 "部分中说,浏览器必须只下载当前页面中使用的字体:

@ font-face规则旨在允许延迟加载字体,仅在需要在文档中使用时下载字体.样式表可以包括@ font-face规则,用于仅使用选择集的字体库; 用户代理只能下载适用于给定页面的样式规则中引用的那些字体.下载@ font-face规则中定义的所有字体而不考虑这些字体是否实际在页面中使用的用户代理被认为是不符合要求的.

所以,无论如何,在你的代码中你不能指定任何特定的行为,如果浏览器是兼容的,它将只下载每个页面所需的那些.

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

如果在字符回退情况下可能下载字体,则用户代理可以下载字体(如果它在字体列表中列出但实际上不用于给定的文本运行).

  • 我今天刚刚测试了这个,这是我的结果:Firefox v26和Chrome v32都只下载字体,如果它们用在样式元素中.你可以拥有任意数量的`@ font-face`声明,但它们只会加载必要的声明.另一方面,Internet Explorer v11加载**定义的所有**字体,无论它们是否实际使用.即使是最新版本的IE(截至编写本文)也是"不符合"的. (4认同)