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

Ответ 1

Это зависит от поведения браузера.

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

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

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 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>

Ответ 6

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

• auto
• блок
• swap
• запасной вариант
• необязательно

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

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

Ответ 7

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

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

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

Ответ 8

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

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