Предварительная загрузка шрифтов @font-face?

можно ли предварительно загрузить или иным образом кэшировать шрифты @font-face, скорее всего, с помощью javascript, до загрузки страницы, чтобы вы не получили этот уродливый прыжок, когда страница наконец загрузится?

42
css embedding font-face fonts javascript

11 ответов

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

1

простой метод заключается в том, чтобы поместить это где-то в вашем индексе:

<div class="font_preload" style="opacity: 0">
    <span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
    <span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
    ...
</div>

протестировано на Chrome 34, Safari 7 и FF 29 и IE 11

26

есть несколько методов для "предварительной загрузки" здесь: http://paulirish.com/2009/fighting-the-font-face-fout/

в основном обманом браузера в загрузку файла как можно быстрее..

вы также можете доставить его в виде data-uri, что очень помогает. а также вы можете скрыть содержимое страницы и показать его, когда будете готовы.

22

2017: теперь у вас есть поджатия

MDN: значение предварительной загрузки атрибута rel элемента позволяет напишите декларативные запросы выборки в HTML, указав ресурсы, которые понадобятся вашим страницам очень скоро после загрузки, которые вы поэтому необходимо начать предварительную загрузку в начале жизненного цикла Страницы нагрузку, прежде чем в браузере главную Rendering машин в кайф. Этот гарантирует, что они будут доступны раньше и с меньшей вероятностью заблокируйте первую отрисовку страницы, что приведет к повышению производительности.

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />

Регистрация совместимость с браузерами.

Это наиболее полезно для предварительной загрузки шрифта (не дожидаясь браузера, чтобы найти его в некоторые CSS). Вы также можете предварительно загрузить некоторые логотипы, значки и сценарии.

обсуждаются другие методы pro/cons здесь (не мой блог).

9

правильная предварительная загрузка шрифта-это большое отверстие в спецификации HTML5. Я прошел через все это, и самое надежное решение, которое я нашел, - использовать шрифт.js:

http://pomax.nihongoresources.com/pages/Font.js/

вы можете использовать его для загрузки шрифтов, используя тот же API, который вы используете для загрузки изображений

var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
  console.log("font loaded");
}

это намного проще и легче, чем неповоротливый загрузчик Google Webfont

вот РЕПО github для Шрифт.js:

https://github.com/Pomax/Font.js

5

этой должно решить вашу проблему.

чтобы ответить на ваш первоначальный вопрос: да, вы можете. В настоящее время его поддерживают только браузеры Gecko и WebKit.
Вам просто нужно добавить теги ссылок в голову:

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">
3

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

например

<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>
2

через Google webfontloader 

var fontDownloadCount = 0;
WebFont.load({
    custom: {
        families: ['fontfamily1', 'fontfamily2']
    },
    fontinactive: function() {
        fontDownloadCount++;
        if (fontDownloadCount == 2) {
            // all fonts have been loaded and now you can do what you want
        }
    }
});
1

недавно я работал над игрой, совместимой с CocoonJS с DOM, ограниченным элементом canvas - вот мой подход:

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

Я объяснил эту технику немного больше в моей недавней статье http://rezoner.net/preloading-font-face-using-canvas,686

0

Google имеет хорошую библиотеку для этого:https://developers.google.com/webfonts/docs/webfont_loader Вы можете использовать практически любые шрифты и lib будут добавлять классы в HTML-тег.

Он даже дает Вам события javascript, когда шрифты certrain загружаются и активны!

Не забудьте обслужить ваши fontfiles gzipped! это, безусловно, ускорит дело.

0

использовать стандартный CSS загрузки шрифтов API.

ждать (все) шрифты для загрузки, а затем показать ваше содержание:

document.fonts.ready.then((fontFaceSet) => {
    console.log(fontFaceSet.size, 'FontFaces loaded.');
    document.getElementById('waitScreen').style.display = 'none';
});

Демо-Сайт CodePen.

0