Html 仅加载该页面中使用的@font-face_Html_Css_Font Face

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

html css

Html 仅加载该页面中使用的@font-face,html,css,font-face,Html,Css,Font Face,我的样式表中有多种@font-face字体，有没有办法只加载该页面上使用的字体？除了为具有该字体的每个页面加载单独的样式表之外。您可以在页面中加载字体，这将覆盖css中指定的字体例如： <head> <link href='http://fonts.googleapis.com/css?family=Krona+One' rel='stylesheet' type='text/css'> </head> <body style="font-famil

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

您可以在页面中加载字体，这将覆盖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-face规则旨在允许延迟加载字体，字体仅在需要在文档中使用时下载。样式表可以包括仅使用选择集的字体库的@font-face规则；用户代理只能下载适用于给定页面的样式规则中引用的字体。下载@font-face规则中定义的所有字体而不考虑这些字体是否在页面中实际使用的用户代理被视为不一致

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

另一个需要考虑的问题是，浏览器是否会下载当前页面中声明为备用但未真正使用的字体。在这种情况下，规范规定它是可选的：

在字符回退情况下可能下载字体的情况下，如果字体列在字体列表中，但实际上未用于给定的文本运行，则用户代理可以下载字体

这是为@font字体而不是谷歌字体设计的，我希望我不必加载单独的样式表。我希望有一种方法可以只加载CSS中为该页面定义的字体谢谢你提供的信息。我将花一些时间在不同的浏览器中访问，并再次检查加载的文件。感谢您的帮助我今天刚刚测试了这一点，下面是我的结果：Firefox v26和Chrome v32都只下载字体，如果它们用于样式元素。您可以有任意多个

@font-face

声明，但它们只会加载必要的声明。另一方面，Internet Explorer v11加载所有已定义的字体，无论它们是否实际使用。即使是最新版本的IE（在撰写本文时）也是“不一致的”。