У тому числі посилання або імпорт веб-шрифтів Google?

189

Який бажаний спосіб включення веб-шрифтів Google до сторінки?

через тег посилання?

<link href = 'http: //fonts.googleapis.com/css? family = Judson: 400,400italic, 700' rel = 'styleheet' type = 'text / css'>

через імпорт у таблицю стилів?

@import url (http://fonts.googleapis.com/css?family=Kameron Meridian00 700);

або використовувати веб-завантажувач шрифтів

https://developers.google.com/webfonts/docs/webfont_loader

fonts webfonts google-webfonts

— кайо
джерело

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

— Обмерк Кронен

Відповіді:

285

У 90% + випадках ви, ймовірно, хочете <link>тег. Як правило, ви хочете уникати @importправил, оскільки вони відкладають завантаження включеного ресурсу, поки файл не буде отриманий .. а якщо у вас є процес збирання, який "розгладжує" імпорт @, ви створюєте ще одну проблему з веб-шрифтами. : динамічні провайдери, такі як Google WebFonts, обслуговують конкретні платформи версії шрифтів, тож якщо ви просто вбудуєте вміст, то на деяких платформах ви зіткнетеся зі зламаними шрифтами.

Тепер, навіщо використовувати веб-завантажувач шрифтів? Якщо вам потрібен повний контроль над завантаженням шрифтів. Більшість браузерів відкладе фарбування вмісту на екрані до тих пір, поки весь CSS не буде завантажено та застосовано - це дозволить уникнути проблеми "спалаху невстиглого контенту". Недоліком є .. у вас може виникнути додаткова пауза та затримка, поки вміст не буде видно. За допомогою завантажувача JS ви можете визначити, як і коли шрифти стають видимими. Наприклад, ви навіть можете їх зникати після того, як оригінальний вміст буде намальований на екрані.

Ще раз, 90% випадок - це <link>тег: використовуйте хороший CDN, і шрифти зійдуть швидко та ще ймовірніше, що вони будуть подані з кеша.

Для отримання додаткової інформації та детального перегляду веб-шрифтів Google, перегляньте це відео GDL

— igrigorik
джерело

"тому що вони відкладають завантаження включеного ресурсу до отримання файлу" - це не вагома причина використовувати @import? Тому що зазвичай ви не хочете бачити вміст, поки шрифт не завантажиться (щоб уникнути цього мерехтіння шрифту)

— Alex

API веб-шрифтів дуже корисний при роботі з HTML5 Canvas. Ви не можете використовувати шрифт, який не закінчився завантаженням, перш ніж малювати текст, і звичайно, щойно шрифт завантажується, він не оновлюється автоматично. Аналогічно, API необхідний для відстеження ходу завантаження активів, наприклад, в грі.

— rvighne

Ця інформація повинна знаходитись на сторінці веб-шрифтів Google. Він просто представляє три варіанти для вас - і не дає корисних підказок щодо того, який з них використовувати та коли.

— Гал

У власному навчальному посібнику " Початок роботи " Google використовується лише <link>метод, тож я думаю, що це той, який вони рекомендують невимовно

— Джеймс Кушинг

Ви також можете додати rel="preload"до <link>тегу, оскільки тоді шрифт буде завантажений до появи тексту. Дивіться 3perf.com/blog/link-rels

— Ілля Макет

Якщо вас турбує SEO (оптимізація пошукових систем) та ефективність роботи, корисно використовувати <link>тег, оскільки він може попередньо завантажити шрифт.

Приклад:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

Для отримання додаткової інформації читайте це: https://ashton.codes/preload-google-fonts-using-resource-hints/

— Омари
джерело

Використовуйте <link>надане Google, оскільки є версія для шрифту, але прямо над ним використовуйте функцію попереднього підключення HTML5, щоб попросити браузери відкрити TCP-з'єднання та заздалегідь узгодити SSL з fonts.gstatic.com. Ось приклад, який, очевидно, повинен містити ваш <head></head>тег:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

— Марк Cilia Vincenti
джерело

Чи правильно, що попереднє з'єднання є абсолютно іншим доменом, ніж посилання таблиці стилів у вашому прикладі? fonts.gstatic.comпротиfonts.googleapis.com

— BadHorsie

@BadHorsie в цьому вся суть. Таблиця стилів на fonts.googleapis.com має посилання на ресурс на fonts.gstatic.com. Ви скажете браузеру ініціювати з’єднання з останнім хостом, щоб воно підключилося або розпочало з'єднання до моменту, коли знайде посилання на таблиці стилів.

— Марк Cilia Vincenti