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

Question

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

Answer 1

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

Прежде всего, где объявлен ваш @font?Он встроен в ваш HTML, объявлен в листе CSS на странице или (мы надеемся) объявлен во внешнем листе CSS?

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

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

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

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

Answer 2

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

---

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

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

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

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

Answer 3

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

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

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

Answer 4

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

Answer 5

Используйте 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>

Answer 6

Поскольку никто не упомянул об этом, я считаю, что этот вопрос нуждается в обновлении.Мне удалось решить проблему, используя опцию «preload», поддерживаемую современными браузерами.

На случай, если кому-то не нужна поддержка старых браузеров.

<link rel="preload" href="assets/fonts/xxx.woff" as="font" type="font/woff" crossorigin>

некоторые полезные ссылки сподробнее:

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content http://www.bramstein.com/writing/preload-hints-for-web-fonts.html

Answer 7

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

• авто
• блок
• своп
• 1010 * запасной вариант *
• опционально

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

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

Answer 8

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

используйте этот метод .. используйте с Webfont.js

Answer 9

Может быть, что-то вроде этого:

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

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