Дождитесь загрузки шрифтов перед отрисовкой веб-страницы

Я использую @font-face для встраивания шрифтов в мой сайт. Сначала текст отображается как системный по умолчанию, а затем (после загрузки файла шрифта предположительно) правильный шрифт отображается на долю секунды позже. Есть ли способ минимизировать / избавиться от этой задержки, отложив рендеринг страницы до тех пор, пока шрифты не загрузятся или не будут похожи.

8 ответов


Это зависит от того, как ведет себя браузер.

во-первых, где объявлен ваш @font? Является ли он встроенным в ваш HTML, объявленный в CSS-листе на странице или (надеюсь) объявленный во внешнем CSS-листе?

Если он не находится во внешнем листе, попробуйте переместить его на один (это лучшая практика в любом случае обычно).

Если это не помогает, вам нужно спросить себя, действительно ли доля второй разницы значительно вредит пользовательскому опыту? Если это так, то рассмотрим JavaScript, есть несколько вещей, которые вы могли бы сделать, перенаправляет, паузы и т. д., Но это может быть хуже чем первоначальная проблема. Хуже для пользователей, и хуже для поддержания.

эта ссылка может помочь:

http://paulirish.com/2009/fighting-the-font-face-fout/


Edit: лучший подход, вероятно, к base64 кодирует ваши шрифты в файл CSS. Это означает, что ваш шрифт должен быть загружен полностью к моменту анализа и отображения HTML. Вы можете сделать это с помощью генератора webfont белка шрифтаhttps://www.fontsquirrel.com/tools/webfont-generator нажав "Expert", а затем"base64 encode". Вот как работают такие службы, как TypeKit.


Оригинал ответ: Другой способ определить, загружены ли шрифты, будет использовать FontLoader https://github.com/smnh/FontLoader или путем копирования их стратегии.

они привязываются к событию прокрутки в браузере, потому что при загрузке шрифта он изменит размер текста. Он использует два содержащих divs (которые будут прокручиваться при изменении высоты) и отдельный резерв для IE.

альтернативой является периодическая проверка DOM с помощью setInterval, но использование событий javascript гораздо быстрее и лучше.

очевидно, вы можете сделать что-то вроде установки непрозрачности тела в 0, а затем отобразить его после загрузки шрифта.


У Joni Korpi есть хорошая статья о загрузке шрифтов перед остальной частью страницы.

http://jonikorpi.com/a-smoother-page-load/

Он также использует загрузки.gif, чтобы облегчить задержку, чтобы пользователи не расстраивались.


только IE загружает шрифт и остальные страницы. Другие браузеры загружают вещи одновременно по какой-то причине. Представьте, что есть проблема с сервером, на котором размещен шрифт, или с загрузкой шрифта. Вы будете висеть весь ваш сайт, пока шрифт не будет загружен. На мой взгляд, вспышка неустановленного текста лучше, чем вообще не видеть сайт


использовать https://github.com/typekit/webfontloader

и проверьте события в конфигурации https://github.com/typekit/webfontloader#configuration

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
    WebFont.load( {
        custom: {
            families: [ 'CustomFont1', 'CustomFont2' ]
        },
        active: function() {
            //render your page
        },
    } );
</script>

вы можете использовать шрифт CSS-дисплей внутри вашего @ font-face. Ключевые слова для всех доступных значений:

  • авто
  • блок
  • обмен
  • откат
  • дополнительно

Джулио Майнарди написал хорошую статью обо всех из них, и которые вы должны использовать, где на sitepoint.

вы можете прочитать его здесь: https://www.sitepoint.com/css-font-display-future-font-rendering-web/?utm_source=frontendfocus&utm_medium=email


(function() {
        document.getElementsByTagName("html")[0].setAttribute("class","wf-loading")
        document.getElementsByTagName("html")[0].setAttribute("className","wf-loading")
    })();

использовать этот метод.. использовать с Webfont.js


может, что-то вроде этого:

$("body").html("<img src='ajax-loader.gif' />");

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