延迟加载字体

Question

我在页面中间想懒加载字体。我使用 Lazysizes 及其插件 Unveilhooks。这是图书馆的作者不久前就这个话题回答的：https://github.com/aFarkas/lazysizes/issues/169

至于字体，是Google的龙虾：https://fonts.google.com/specimen/Lobster

fonts.css

@font-face {
    font-family: 'Lobster';
    src: '\wp-content\themes\nonverbis\assets\fonts\lobster\Lobster-Regular.ttf';
}

html

<span class="lazyload" data-link="\wp-content\themes\nonverbis\assets\css\custom\fonts.css"></span>

<p style='font-family: "Lobster script=latin rev=2";'>Lorem ipsum</p>

尽我所能 fonts.css 延迟加载。在加载的 fonts.css 中，字体的路径是正确的。

但是从视觉上看，页面上的文字字体并没有改变。

你能帮帮我吗？

Answer 1

使用LazyHTML，但需要在Head中添加lazyhtml脚本

<script async src="https://cdn.jsdelivr.net/npm/lazyhtml@1.2.3/dist/lazyhtml.min.js" crossorigin="anonymous" debug></script>

将上面的脚本添加到Head

<div class="lazyhtml" onvisible data-lazyhtml>
  <script type="text/lazyhtml">
  <!--
   <link rel="stylesheet" href="/wp-content/themes/nonverbis/assets/css/custom/fonts.css">
   -->
 </script>
</div>
   
<p style='font-family: "Lobster script=latin rev=2";'>Lorem ipsum</p>

Lazy HTML Github

延迟加载字体

Lazy loading a font

css

lazy-loading