Как загрузить внешние шрифты с помощью javascript перед готовкой страницы

Я использую typekit на своем веб-сайте для загрузки шрифтов, а typekit дает мне 2 ссылки.Как загрузить внешние шрифты с помощью javascript перед готовкой страницы

<script src="https://use.typekit.net/xxxx.js"></script> 
<script>try { Typekit.load({ async: false }); } catch (e) { }</script>

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

PS: Я попробовал async: true и false .. Оба они дали тот же результат.

источник

2016-07-11 Tolga Kısaoğulları

Есть ли другие линии между ссылками на шрифты и ''? Это может вызвать проблему. –

Нет. Я пробовал, как вы сказали ниже. –

Не могли бы вы предоставить весь код внутри элемента ''? Живой пример облегчит вам помощь. –

Вы можете использовать только Font Evens, чтобы скрыть контент при загрузке шрифтов. https://helpx.adobe.com/typekit/using/font-events.html

источник

2016-07-11 11:28:48 exabyssus

Я думаю, это единственный способ, но я не люблю его, но я думаю, что я собираюсь использовать CSS, как это. .wf-загрузка h1, .wf-загрузка h2, .wf-загрузка h3, .wf-load p, .wf-load span, type = submit] { видимость: скрыто; } –

Вы также можете реализовать экран загрузки. С точки зрения UX это немного раздражает, но выглядит лучше. – exabyssus

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

Вы можете попробовать window.onpaint, если просто положить ссылки на шрифты на <head> не работает.

<head> 
    <script src="https://use.typekit.net/xxxx.js"></script> 
</head>

Тогда;

<script type="text/javascript"> 
    function preloadFunc() 
    { 
     try { Typekit.load({ async: false }); } catch (e) { } 
    } 
    window.onpaint = preloadFunc(); 
</script>

источник

2016-07-11 11:36:01

Я пробовал, но это не сработало –

Как загрузить внешние шрифты с помощью javascript перед готовкой страницы

ответ

Смежные вопросы