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

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

48 голосов
/ 26 августа 2009

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

Ответы [ 13 ]

31 голосов
/ 16 мая 2014

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

<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

23 голосов
/ 24 апреля 2010

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

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

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

20 голосов
/ 19 октября 2017

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

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

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

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

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

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

5 голосов
/ 08 декабря 2013

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

Вот репозиторий github для Font.js:

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

3 голосов
/ 13 января 2010

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

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

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">
2 голосов
/ 14 января 2013

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

, например 

<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>
1 голос
/ 19 ноября 2017

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

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

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

Демо CodePen .

1 голос
/ 24 июня 2015

Через 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
        }
    }
});
0 голосов
/ 09 апреля 2019

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

<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');
}
0 голосов
/ 06 апреля 2019

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

Страница:
...