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

Ответ 1

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

Ответ 2

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

<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

Ответ 3

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

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

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

Ответ 4

2017: Теперь у вас есть предварительная загрузка

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

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

Проверьте совместимость браузера.

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

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

Ответ 5

Правильная предварительная загрузка шрифтов - большая дыра в спецификации HTML5. Я прошел через все это, и самым надежным решением, которое я нашел, является использование Font.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 repo для Font.js:

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

Ответ 6

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

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

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

Ответ 7

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

например.

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

Ответ 8

Через 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
        }
    }
});

Ответ 9

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

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

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

Ответ 10

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

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

Не забудьте использовать ваши файлы шрифтов gzipped! это, безусловно, ускорит все!

Ответ 11

Используйте стандартный CSS Font Loading API.

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

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

Демо-кодPen.

Ответ 12

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

<link href="fonts.css?family=Open+Sans" rel="preload stylesheet" as="style">

затем в файле font.css укажите следующее.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('open-sans-v16-latin-regular.woff2') format('woff2'); /*  Super Modern Browsers */
}

Вы не можете назначить имя для шрифтов, когда оно предварительно загружено через тег ссылки (поправьте меня, если я ошибся, я пока не могу найти способ), и поэтому вы должны использовать font-face, чтобы назначить имя шрифту. Несмотря на то, что можно загрузить шрифт с помощью тега ссылки, это не рекомендуется, поскольку вы не можете присвоить ему имя шрифта. Без имени, как у font-face, вы не сможете использовать его нигде на веб-странице. Согласно gtmetrix, таблица стилей загружается в начале, затем остальные сценарии/стили по порядку, затем шрифт перед загрузкой dom, и поэтому вы не видите эффекта изменения шрифта.