如何知道浏览器将使用哪个 unicode-range 来预加载字体？
[英]How to know which `unicode-range` will be used by the browser for preload a font?
问题描述
I search to preload a fonts from CSS file.
我从 CSS 文件中搜索预加载 fonts。
The Css Files cut the font by unicode-range : It's pretty good, that load only the part of the font I want. Css Files cut the font by unicode-range : 挺好的，只加载了我想要的那部分字体。
But: I want to preload (before this CSS file) the font will be used by the browser.但是：我想预加载（在这个 CSS 文件之前）字体将被浏览器使用。 And I don't know how to know what is the font I should preload?而且我不知道如何知道我应该预加载的字体是什么？
ex:前任：
<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 file (mystyleFont.css): 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;
}
In this sample, I want to preload only c.woff2 if the browser use the unicode-range U+0460-052F ...在此示例中，如果浏览器使用 unicode-range U+0460-052F c.woff2我只想预加载c.woff2 ...
And I don't want to preload all fonts on my page.而且我不想在我的页面上预加载所有 fonts 。
Do you have an idea for that?你有什么想法吗？
Thank you !谢谢 ！
1 个解决方案
解决方案1
1 2020-12-23 12:59:33
As described in the Mozilla documentation :如Mozilla 文档中所述：
If the page doesn't use any character in this range, the font is not downloaded;
To be clear, it will still download the whole file when needed.需要说明的是，它仍会在需要时下载整个文件。 Not just part of it.不只是其中的一部分。
Some precisions on unicode-range behavior: unicode-range行为的一些精确度：
- It will change the font only for the characters inside the range, even if the css is applied to a whole element它只会更改范围内字符的字体，即使 css 应用于整个元素
- It only loads the font once a character inside the range appears, and this will reload the style of all elements affected, even if they don't have the character but the style is attached.它只会在范围内的字符出现时加载字体，这将重新加载所有受影响元素的样式，即使它们没有字符但样式已附加。 This will be visible as a blink in the page, the blink duration is the time to fetch the font这将在页面中显示为闪烁，闪烁持续时间是获取字体的时间
- Using
preloadwill ensure the page's style reload blink duration is minimal使用preload将确保页面的样式重新加载闪烁持续时间最短 - Using
preloadmust includeas=andtype=or the font will be re-downloaded使用preload必须包括as=和type=否则字体将被重新下载
When you say:当你说：
I want to preload only c.woff2 if the browser use the unicode-range U+0460-052F...
For browsers that support the attribute (all recent browsers except IE), when at least one character of the range is required to be displayed, the font will be downloaded in full.对于支持该属性的浏览器（除IE外的所有最新浏览器），当至少需要显示范围内的一个字符时，字体将被完整下载。 But preload will happen as the page is loaded, and so the css attributes aren't yet loaded, resulting in a download of all fonts marked as preload .但是preload会在页面加载时发生，因此css属性尚未加载，导致下载所有标记为preload的 fonts 。 With your current config, if you remove the preload , only the font that are actually used in the page will be fetched.使用您当前的配置，如果您删除preload ，则只会获取页面中实际使用的字体。
To extend the answer, you can also reduce the font size by removing glyphs ( some examples here ).要扩展答案，您还可以通过删除字形来减小字体大小（ 此处有一些示例）。 Meaning you could cut your font in pieces and retrieving the relevant part using the css's attribute unicode-range .这意味着您可以将字体切割成碎片并使用 css 的属性unicode-range检索相关部分。
Note that if your font is not very large (more than fews Mb ), this optimization is overkill and you should focus on other options (caching, http 's compression, http2 's multiplexing, ...)请注意，如果您的字体不是很大（超过几Mb ），则此优化是过度的，您应该关注其他选项（缓存， http的压缩， http2的多路复用，...）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.