Можно ли предварительно загружать или иным образом кешировать шрифты шрифта font font, наиболее вероятно с javascript, до загрузки страницы, чтобы вы не получили этот уродливый прыжок, когда страница, наконец, загрузится?Предварительная загрузка шрифтов шрифта?
Я не знаю никакой текущей техники, чтобы избежать мерцания при загрузке шрифта, однако вы можете свести его к минимуму, отправив правильные заголовки кеша для вашего шрифта и убедившись, что этот запрос проходит как можно быстрее.
This должен решить вашу проблему.
Чтобы ответить на ваш первоначальный вопрос: да, вы можете. В настоящее время поддерживаются только браузеры Gecko и WebKit.
Вам просто нужно добавить ссылку тегов в вашей голове:
<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">
Это не работает с холст-шрифты – d13
Вы должны быть осторожны с материалами prerendering на своей странице. Это не то же самое, что и предварительная выборка. – kleinfreund
почему 'prerender', а не' preload'? это шрифт, а не HTML-файл, нет ничего, чтобы сделать это. – vsync
Есть несколько методов для «поджимать» здесь: http://paulirish.com/2009/fighting-the-font-face-fout/
В основном обманывая браузер в скачивании файла как можно быстрее. .
Вы также можете доставить его в виде данных-uri, что очень помогает. , а также вы можете скрыть содержимое страницы и показать ее, когда она будет готова.
Извините, чтобы выкопать это, но я подозреваю, что я что-то не понимаю. Советы в блоге, похоже, касаются скрытия текста во время загрузки шрифта, но что, если я просто хочу получить, например, Chrome загружает его как можно скорее, а не когда он сталкивается с каким-то текстом с этим шрифтом? Является ли мой лучший вариант скрытым div в
? –Я сделал это, добавив несколько букв в свой основной документ и сделал его прозрачным и назначил шрифт, который я хотел загрузить.
например.
<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>
Недавно я работал над игрой, совместимой с CocoonJS с DOM ограниченным к элементу холста - вот мой подход:
Использование fillText со шрифтом, который не был загружен еще будет выполняться должным образом, но с нет визуальной обратной связи - так что плоскость холста останется неповрежденной - все, что вам нужно сделать, - это периодически проверять холст на любые изменения (например, цикл через getImageData для поиска любого непрозрачного пикселя), который будет происходить, когда шрифт загрузится должным образом.
Я объяснил эту технику немного больше в моей недавней статье http://rezoner.net/preloading-font-face-using-canvas,686
Google имеет хорошую библиотеку для этого: https://developers.google.com/webfonts/docs/webfont_loader Вы можете использовать практически любые шрифты и Lib будет добавлять классы в HTML тега.
Он даже дает вам события javascript, когда загружаются и активируются шрифты certrain!
Не забудьте использовать ваши шрифты gzipped! это, безусловно, ускорит все!
Правильная предварительная загрузка шрифта - большое отверстие в спецификации HTML5. Я прошел через все это, и самым надежным решением, которое я нашел, является использование Font.ЯШ:
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's hulking Webfont Loader
Вот GitHub репо для Font.js:
Простой метод поместить это где-то в индексе:
<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
Via 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
}
}
});
Парень выше вас дал тот же ответ за 2 года до вас ..почему ты снова начал писать? Мне любопытно – vsync
Мой ответ просто дает фрагмент кода, который люди могут использовать для загрузки нескольких шрифтов с помощью webfontloader. Предыдущий ответ дает хорошее введение в webfontloader, но не содержит фрагмента кода. –
Вы должны были отредактировать его, а не повторять, и добавить пример кода. это очень запутанно и трата свитков, чтобы в ответах повторялись почти одинаковые ответы. – vsync
2017 : У вас теперь есть preload
MDN: Оценка предварительной нагрузки e атрибута rel элемента позволяет вам записывать декларативные запросы на выбор в вашем HTML, указав ресурсы, которые вам понадобятся вам очень скоро после загрузки, поэтому вы должны начать предварительную загрузку на раннем этапе жизненного цикла страницы , прежде чем основное средство обработки браузера запускается. Это гарантирует, что они будут доступны ранее и менее вероятно, что блокирует первый рендеринг страницы, что приводит к повышению производительности.
<link rel="preload" href="/fonts/myfont.eot" as="font" />
Проверить browser compatibility.
Это наиболее полезно для предварительной загрузки шрифтов (не дожидаясь, когда браузер найдет его в некотором CSS). Вы также можете предварительно загрузить некоторые логотипы, значки и скрипты.
Использовать стандарт CSS Font Loading API.
Подождите (все) шрифты для загрузки, а затем показать свое содержание:
document.fonts.ready.then((fontFaceSet) => {
console.log(fontFaceSet.size, 'FontFaces loaded.');
document.getElementById('waitScreen').style.display = 'none';
});
Нельзя указать высоту/высоту линии, чтобы избежать эффекта прыжка? – kangax
хорошее место для запуска https://css-tricks.com/fout-foit-foft/ – TarranJones
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content –