我搜索以从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>
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范围U+0460-052F，我希望仅预加载c.woff2。。。
并且我不想在我的页面上预加载所有字体。
你对此有想法吗？
谢谢！
如Mozilla文档中所述：
如果页面没有使用该范围内的任何字符，则不会下载字体；如果它至少使用了一个，则会下载整个字体。
需要明确的是，它仍然会在需要时下载整个文件。不仅仅是其中的一部分。
关于unicode-range行为的一些精确性：
- 它将只更改范围内字符的字体，即使css应用于整个元素
- 它只在范围内的字符出现时加载字体，这将重新加载所有受影响元素的样式，即使它们没有该字符，但样式已附加。这将在页面中显示为闪烁，闪烁持续时间是获取字体的时间
- 使用
preload将确保页面的样式重新加载闪烁持续时间最小 - 使用
preload必须包括as=和type=，否则字体将被重新下载
当你说：
如果浏览器使用unicode范围U+0460-052F，我只想预加载c.woff2。。。
对于支持该属性的浏览器(除IE外的所有最新浏览器(，当需要显示该范围中的至少一个字符时，字体将被完整下载。但是preload将在页面加载时发生，因此css属性尚未加载，从而导致下载所有标记为preload的字体。使用当前配置，如果删除preload，则只会提取页面中实际使用的字体。
为了扩展答案，您还可以通过删除字形来减小字体大小(这里有一些示例(。这意味着您可以将字体切成碎片，并使用css的属性unicode-range检索相关部分。
请注意，如果您的字体不是很大(超过几个Mb(，则这种优化是过度的，您应该关注其他选项(缓存、http的压缩、http2的多路复用…(