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

Question

我从 CSS 文件中搜索预加载 fonts。

Css Files cut the font by 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>

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;
}

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

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

你有什么想法吗？

谢谢！

Answer 1

如Mozilla 文档中所述：

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

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

unicode-range行为的一些精确度：

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

当你说：

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

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

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

请注意，如果您的字体不是很大（超过几Mb ），则此优化是过度的，您应该关注其他选项（缓存， http的压缩， http2的多路复用，...）

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

问题描述

1 个解决方案

解决方案1
1 2020-12-23 12:59:33

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

问题描述

1 个解决方案

解决方案1 1 2020-12-23 12:59:33

解决方案1
1 2020-12-23 12:59:33