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

StackOverflow https://stackoverflow.com/questions/1330825

Вопрос

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

Это было полезно?

Решение

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

Другие советы

Простой метод — поместить это где-нибудь в ваш индекс:

<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.

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

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

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

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

МДН:Значение предварительной нагрузки атрибута Element REL позволяет вам писать декларативные запросы избрать в свой HTML, указав ресурсы, которые ваши страницы потребуют очень скоро после загрузки, что вы хотите начать предварительно загружать в начале жизненного цикла нагрузки страницы, до браузера Основная рендеринг -механизм начинается.Это гарантирует, что они становятся доступными ранее и с меньшей вероятностью заблокируют первое рендеринг страницы, что приводит к улучшению производительности.

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

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

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

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

Правильная предварительная загрузка шрифтов — это большая дыра в спецификации 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

Вот репозиторий Font.js на Github:

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

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

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

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

Через Google веб-шрифтлоадер 

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
        }
    }
});

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

например

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

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

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

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

Демо-версия CodePen.

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

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

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

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

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

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

Как я обнаружил, лучший способ — это предварительно загрузить таблицу стилей, содержащую шрифт, а затем позволить браузеру загрузить ее автоматически.Я использовал шрифт в других местах (на 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, чтобы присвоить имя шрифту.Несмотря на то, что шрифт можно загрузить через тег ссылки, это не рекомендуется, поскольку с его помощью нельзя присвоить имя шрифту.Без имени, как в случае со шрифтом-face, вы не сможете использовать его где-либо на веб-странице.Согласно gtmetrix, таблица стилей загружается вначале, затем остальные скрипты/стили по порядку, затем загружается шрифт перед dom, и поэтому вы не видите эффекта изменения шрифта.

Ваша голова должна включать предварительную нагрузку следующим образом:

<head>
    ...
    <link rel="preload" as="font" href="/somefolder/font-one.woff2">
    <link rel="preload" as="font" href="/somefolder/font-two.woff2">
</head>

Таким образом, woff2 будет предварительно загружен браузерами, поддерживающими предварительную загрузку, и все резервные форматы будут загружаться как обычно.
И ваш шрифт CSS должен выглядеть примерно так:

@font-face {
    font-family: FontOne;
    src: url(../somefolder/font-one.eot);
    src: url(../somefolder/font-one.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-one.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-one.woff) format('woff'),
    url(../somefolder/font-one.ttf)  format('truetype'),
    url(../somefolder/font-one.svg#svgFontName) format('svg'); 
}
@font-face {
    font-family: FontTwo;
    src: url(../somefolder/font-two.eot);
    src: url(../somefolder/font-two.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-two.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-two.woff) format('woff'),
    url(../somefolder/font-two.ttf)  format('truetype'),
    url(../somefolder/font-two.svg#svgFontName) format('svg');
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top