如何知道浏览器将使用哪个“unicode-range”来预加载字体？

Question

如何知道浏览器将使用哪个“unicode-range”来预加载字体？

我搜索从 CSS 文件预加载字体。

Css 文件将字体剪切为unicode-range：非常好，只加载我想要的字体部分。

但是：我想预加载（在此 CSS 文件之前）浏览器将使用的字体。我不知道如何知道我应该预加载的字体是什么？

前任：

<head>
    <!-- Which font ? a.woof2 / b.woff2 or c.woff2 ? -->
    <link rel="preload" href="fonts/myFont_x.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <!-- other elements -->
    <link rel="stylesheet" href="mystyleFont.css">
</head>

Run Code Online (Sandbox Code Playgroud)

CSS 文件（mystyleFont.css）：

@font-face {
  font-family: 'myFont';
  font-display: swap;
  src: url(https://example.com/a.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // That is the unicode-range
}

@font-face {
  font-family: 'myFont';
  font-display: swap;
  src: url(https://example.com/b.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129;
}

@font-face {
  font-family: 'myFont';
  font-display: swap;
  src: url(https://example.com/c.woff2) format('woff2');
  unicode-range: U+0460-052F;
}

Run Code Online (Sandbox Code Playgroud)

在此示例中，我只想 c.woff2 在浏览器使用 unicode-range 时U+0460-052F进行预加载...

而且我不想在我的页面上预加载所有字体。

你对此有什么想法吗？

谢谢！

Answer 1

Cyr*_*bil 1

正如Mozilla 文档中所述：

如果页面不使用此范围内的任何字符，则不会下载该字体；如果它至少使用一种，则下载整个字体。

需要明确的是，它仍然会在需要时下载整个文件。不只是其中的一部分。

对行为的一些精确性unicode-range：

即使 css 应用于整个元素，它也只会更改范围内字符的字体
它仅在出现范围内的字符时加载字体，这将重新加载所有受影响元素的样式，即使它们没有该字符但附加了样式。这将在页面中显示为闪烁，闪烁持续时间是获取字体的时间
使用preload将确保页面的样式重新加载闪烁持续时间最短
使用preload必须包含as=，type=否则字体将被重新下载

当你说：

如果浏览器使用 unicode 范围 U+0460-052F，我只想预加载 c.woff2...

对于支持该属性的浏览器（除IE之外的所有最新浏览器），当需要显示至少一个范围内的字符时，将完整下载该字体。但preload会在页面加载时发生，因此 css属性尚未加载，导致下载所有标记为preload. 使用当前配置，如果删除preload，则只会获取页面中实际使用的字体。

为了扩展答案，您还可以通过删除字形来减小字体大小（此处有一些示例）。这意味着您可以将字体切成碎片并使用 css 的 attribute 检索相关部分unicode-range。

请注意，如果您的字体不是很大（超过几个Mb），那么这种优化就太过分了，您应该关注其他选项（缓存、http压缩、http2多路复用……）

归档时间：	5 年前
查看次数：	865 次
最近记录：	5 年前