如何知道浏览器将使用哪个‘`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>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 。
--我不想在我的页面上预装所有字体。
你有什么主意吗？
谢谢！
回答 1
Stack Overflow用户
发布于 2020-12-23 12:59:33
如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的多路复用、.)。
https://stackoverflow.com/questions/65413270
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号