Блог

Главная - Вопросы по программированию - Отложенная загрузка шрифта

Отложенная загрузка шрифта

#css #lazy-loading

Вопрос:

Я в середине страницы хочу лениво загрузить шрифт. Я использую 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-contentthemesnonverbisassetsfontslobsterLobster-Regular.ttf';
}

HTML

 <span class="lazyload" data-link="wp-contentthemesnonverbisassetscsscustomfonts.css"></span>

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

Насколько я могу, fonts.css загружается лениво. И внутри загруженного fonts.css путь к шрифту правильный.

Но визуально шрифт текста на странице не изменился.

Не могли бы вы мне помочь?

Комментарии:

1. Я не уверен, но логично, что у вас есть текст, отображаемый другим шрифтом, страницу необходимо повторно отобразить. На мой взгляд, попробуйте загрузить шрифт нормально.

2. Но автор Lazysizes пишет, что это возможно. Но, честно говоря, я не могу полностью уловить его идею. Если шрифты могут загружаться лениво, это может значительно ускорить работу сайта.

Ответ №1:

Используйте LazyHTML, но вам нужно добавить скрипт lazyhtml в Head

 <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>

Ленивый HTML Github

Метки: