预加载@font字体？

javascript css fonts embedding font-face

2022-08-30 04:41:25

是否可以在页面加载之前预加载或以其他方式缓存@font字体，最有可能使用javascript，这样当页面最终加载时，您就不会得到丑陋的跳跃？

答案 1

自2017年以来，您已预加载

MDN：元素的rel属性的预加载值允许您在HTML中编写声明性提取请求，指定页面在加载后不久所需的资源，因此您希望在页面加载的生命周期早期开始预加载，在浏览器的主要渲染机制启动之前。这可确保它们更早可用，并且不太可能阻止页面的首次呈现，从而提高性能。

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />
<link rel="preload" href="/fonts/mywofffont.woff2" as="font" type="font/woff2" crossorigin>

始终检查浏览器兼容性。

它对于字体预加载最有用（而不是等待浏览器在某些CSS中找到它）。您还可以预加载一些徽标，图标和脚本。

这里讨论了其他技术优点/缺点（不是我的博客）。
另请参阅预取（类似）和 SO 问题，了解预加载与预取。

答案 2

一个简单的技术是将它放在索引中的某个位置：

<div class="font_preload" style="opacity: 0">
    <span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
    <span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
    ...
</div>

在 Chrome 34、Safari 7、FF 29 和 IE 11 上进行了测试