Попереднє завантаження шрифтів @ font-face?

83

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

javascript  css  fonts  embedding  font-face 
2
Ви не можете вказати висоту / висоту лінії, щоб уникнути ефекту стрибка?
— kangax
1
гарне місце для початку css-tricks.com/fout-foit-foft
— TarranJones
— Крістоф Руссі
— Джей

Відповіді:

4

Ця відповідь вже не актуальна

Зверніться до цієї оновленої відповіді: https://stackoverflow.com/a/46830425/4031815

Застаріла відповідь

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

— Габріель Герлі
джерело
44

З 2017 року у вас є попереднє завантаження

MDN: Значення попереднього завантаження атрибута rel елемента дозволяє вам писати декларативні запити на отримання у вашому HTML, вказуючи ресурси, які вашим сторінкам знадобляться дуже скоро після завантаження, і тому ви хочете розпочати попереднє завантаження на початку життєвого циклу завантаження сторінки, до вмикається основний механізм візуалізації браузера. Це гарантує, що вони будуть доступні раніше і з меншою ймовірністю заблокують перший візуалізацію сторінки, що призведе до підвищення продуктивності.

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

Завжди перевіряйте сумісність браузера .

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

— Крістоф Руссі
джерело
15
— Окку,
@IlpoOksanen додав це зараз
— Крістоф Руссі,
1
але як присвоїти завантаженому шрифту прізвище шрифту?
— Дон Діланга,
@DonDilanga Я думаю, це все, що ти повинен робити через CSS
— Крістоф Руссі,
41

Простий прийом - помістити це десь у свій індекс:

<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

— Рафуй
джерело
1
У моїй ситуації це чудово працювало, щоб шрифти були попередньо завантажені для використання в fabricjs. Дякую.
— Брендон
23

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

В основному обманюючи браузер, щоб завантажити файл якомога швидше ..

Ви також можете доставити його як data-uri, що дуже допомагає. а також ви можете приховати вміст сторінки та показати його, коли він буде готовий.

— Пол Ірландський
джерело
3
Вибачте, розкопати це, але я підозрюю, що я чогось не розумію. Поради щодо публікації в блозі, схоже, стосуються приховування тексту під час завантаження шрифту, але що, якщо я просто хочу, щоб, наприклад, Chrome завантажив його якомога швидше, а не тоді, коли він зустрічає якийсь текст із цим шрифтом? Чи є моїм найкращим варіантом прихований div у <head>?
— Елі Роуз - ВІДНОВИТИ МОНІКУ
12

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

<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');
}
— Андрій
джерело
2
Добре додати наступні атрибути type = "font / woff2" та crossorigin до <link>, щоб запобігти помилкам браузера. Інакше це була найкраща відповідь для моєї справи.
— MartinG
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

Ось репозиторій github для Font.js:

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

— d13
джерело
4

Через веб- завантажувач 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
        }
    }
});
— Разан Павло
джерело
Хлопець вище вас дав точну відповідь за 2 роки до вас. Мені цікаво
— vsync
Моя відповідь просто дає фрагмент коду, який люди можуть використовувати для завантаження декількох шрифтів за допомогою webfontloader. Попередня відповідь дає гарний вступ до webfontloader, але не містить фрагмента коду.
— Razan Paul,
Вам слід було відредагувати його замість повторення та додавання прикладу коду. дуже заплутано і марно прокручувати наявність майже однакових відповідей, що повторюються у питаннях.
— vsync
2

Це має вирішити вашу проблему.

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

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">
— Кну
джерело
Ви повинні бути обережними з попереднім відтворенням матеріалів на своїй сторінці. Це не те саме, що попереднє завантаження.
— kleinfreund
2
чому prerenderі ні preload? це шрифт, а не HTML-файл, тут нічого не можна відобразити
— vsync
2

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

напр

<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>
— Трент
джерело
2

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

— Дон Діланга
джерело
1

Використовуйте стандартний API завантаження шрифтів CSS .

Зачекайте, поки завантажаться ( усі ) шрифти, а потім покажіть свій вміст:

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

Демо CodePen .

— yФіл
джерело
Зараз це дуже широко підтримується: API завантаження шрифтів . Більше, ніж font-display: font-display
— jamess
0

Нещодавно я працював над грою, сумісною з 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 завантажені та активні!

Не забудьте подати свої шрифтові файли у стислій формі! це, безумовно, пришвидшить справу!

— Мігель Алехандро Фуентес Лопес
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.