Як використовувати веб-шрифти

Sep 13, 2025

Як

Нижче наведено витяг, взяті з підручника Webfont Bram Stein. Купити його тут .

Веб-шрифти визначаються в CSS через @ font-face Правило. Якщо ви веб-розробник, ви, швидше за все, написано, скопійовано та вставляли, або в найменше видно @ font-face Правило.

Заради повноти, хоча, давайте швидко проходять через основний приклад:

 @ font-face {
  Шрифт-Сім'я: Олена;
  SRC: URL (Elena-Regular.Woff);
}

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

Тут, якщо Олена не зможе завантажувати, браузер повернеться на загальний серійник Сім'я шрифту:

 p {
  Шрифт-Сім'я: Олена, серійна;
}

Там більше, щоб загинути шрифти, але зараз давайте тримати наш шрифт стек простий, включивши лише загальний серійник і без зарубок Сім'ї шрифтів.

Сімейні шрифти

Створення сім'ї шрифту з кількома стилями здійснюється шляхом створення @ font-face Правило для кожного стилю і використання того ж сім'я шрифту Ім'я. Наступні @ font-face Правила створюють сім'ю з нормальним та жирним стилем:

 @ font-face {
     Шрифт-Сім'я: Олена;
     SRC: URL (Elena-Regular.Woff);
     Шрифт-вага: Нормальний;
}
   @ font-face {
     Шрифт-Сім'я: Олена;
     SRC: URL (elena-bold.woff);
     Шрифт-вага: жирний;
}

Ви можете використовувати цю сім'ю шрифту у своїх CSS, посилаючись на прізвище та вагу у своїх селекторах. Це застосовує регулярний стиль до параграфів і сміливий стиль сильний Пункти:

 p {
  Шрифт-Сім'я: Олена, серійна;
}

p сильний {
  Шрифт-вага: жирний;
}

Крім того шрифт-вага , @ font-face також приймає стиль шрифту і шрифт-розтягування Дескриптори власності, які визначають такі стилі, як курсив та конденсований. Всі три дескриптори власності можуть бути використані для створення однієї сім'ї шрифту з кількома стилями. Теоретично це дозволяє створити сім'ю, що містить 243 окремих стилів (дев'ять шрифт-вага Значення × три стиль шрифту Значення × дев'ять шрифт-розтягування значення).

На практиці, однак, ви обмежені до 27 значень, оскільки деякі браузери не підтримують шрифт-розтягування . Подивіться на таблицю нижче, щоб переглянути, які браузери ви можете використовувати, і подивитися тут Для більш детальної інформації.

Click the icon in the top right to enlarge the image — Натисніть значок у верхньому правому куті, щоб збільшити зображення

Пощавню, інші браузери будуть реалізовувати шрифт-розтягування Майно скоро, і ви зможете використовувати всі 243 класифікації шрифту.

Формати шрифтів

Точний ст Дескриптор розповідає браузер, де отримати файл шрифту. Попередні приклади використовували один формат шрифту, але ви часто побачите URL-адреси для декількох формати шрифтів, у поєднанні з підказками формату, які додаються після URL-адреси, використовуючи формат ("значення") синтаксис.

Формат Підказки Повідомте браузер, який формат файлу шрифту на заданій URL-адресі.

 @ font-face {
  Шрифт-Сім'я: Олена;
  SRC: Формат URL (Elena-Regular.Woff2) ("Woff2"),
       URL-адреса (формат elena-regular.woff) ("woff");
}

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

Незважаючи на те, що підказки формату є необов'язковими, завжди включати їх - вони дозволяють браузер зназна про формат, не потребуючи завантаження шрифту. Наприклад, якщо браузер не підтримує Woff2, але підтримує Woff, він може пропустити файл Font Woff2 на основі підказки формату.

Браузери підтримують кілька формати веб-шрифтів: OpenType (TrueType), EOT, WOFF та WOFF2. Деякі браузери також підтримують SVG-шрифти, але вони застаріли і більше не повинні використовуватися (і не слід заплутатися з Новий формат OpenType-SVG ).

EOT, woff, і woff2 є технічно неформатними форматами. Вони стиснуті файли OpenType з різними ступенями стиснення. Woff2 пропонує найкраще стиснення, а потім Woff і EOT.

При дослідженні охоплення для всіх браузерів, ви, можливо, настали щось, що називається куленепробивний @ font-face синтаксис шляхом fontpring.

Сигнал куленевого струму використовує EOT, WOFF2, WOFF, RAW OPENTIPE та FONT SVG FONT для максимального покриття браузера:

 @ font-face {
  Шрифт-Сім'я: Олена;
  SRC: URL (ELENA.EOT? "Формат" ("Embedded-OpenType"),
       URL (elena.woff2) формат ("woff2"),
       URL (ELENA.WOFF) формат ("Woff"),
       Формат URL (ELENA.OTF) ("OpenType"),
       URL (elena.svg # elena) формат ("svg");
}

Перша лінія URL-адреси може виглядати трохи дивно для вас. Версії Internet Explorer 8 і нижче не підтримують синтаксис для декількох формати шрифтів, а також лікувати всю величину ст майно як URL-адреса.

Куленепробивні синтаксичні трюки Internet Explorer 8 і нижче, щоб мислити, що інші URL-адреси є частиною ідентифікатора фрагмента першої URL-адреси. Оскільки ідентифікатори фрагментів ігноруються під час завантаження файлів, Internet Explorer 8 і нижче, просто використовуйте першу URL-адресу.

Браузери, крім Internet Explorer, пропустіть лінію, оскільки вони не підтримують EOT.

Решта записів - це те, що ви очікували: формати шрифтів, перераховані в порядку переваги.

Але чи є синтаксис кулею кулею? Насправді, я думаю, що це шкідливо. Шрифти SVG не підтримуються і підтримуються лише браузерами, які більше не використовуються.

Більшість веб-сайтів підтримують Internet Explorer 9 та UP, але синтаксичні списки EOT як перший переважний формат шрифту. Незважаючи на те, що Internet Explorer 9 та підтримка Woff, ці версії все одно завантажують файл EOT, просто тому, що він перерахований спочатку.

Оскільки більшість веб-сайтів більше не підтримують старі браузери, я настійно рекомендую використовувати спрощений синтаксис. Цей спрощений синтаксис охоплює всі сучасні браузери, а також трохи старші, які все ще знаходяться в активному використанні, такі як Android 4.4 і раніше:

 @ font-face {
  Шрифт-Сім'я: Олена;
  src: url (elena.woff2) формат ("woff2"),
       URL (ELENA.WOFF) формат ("Woff"),
       URL (elena.otf) формат ("OpenType");
}

Незважаючи на те, що старі версії Android все ще використовуються, всесвітня залежність від цих браузерів швидко зменшується. Незабаром ви, мабуть, зможете також відмовитися від формату RAW OPENTYPE, і ще більше спростити синтаксис:

 @ font-face {
  Шрифт-Сім'я: Олена;
  src: url (elena.woff2) формат ("woff2"),
       Формат URL (ELENA.WOFF) ("WOFF");
}

У цьому випадку хтось запущений старшим браузером, просто побачить ваші зворотні шрифти замість веб-шрифту. Це чудово; Вони все ще можуть читати вміст у зворотному шрифті.

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

 @ font-face {
  Шрифт-Сім'я: Олена;
  SRC: місцева ("Олена"),
       URL (elena-regult.woff2) формат ("woff2"),
       URL-адреса (формат elena-regular.woff) ("woff");
}

Хоча це може здатися чудовою оптимізацією, ніщо не гарантує, що місцевий шрифт відповідає вашому веб-шрифту.

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

Це витяг від Брам Штейна Довідник Webfont , з книги. У ньому він досліджує, що розглянути при виборі веб-шрифтів, як ефективно використовувати їх, і як оптимізувати для виконання.

Пов'язані статті:

Що, чорт візьми, блок-екран?
30 хромових розширень для веб-дизайнерів та дерів
20 дивовижні безкоштовні веб-шрифти Google

Як використовувати веб-шрифти

Сімейні шрифти

Формати шрифтів

Як - Найпопулярніші статті

Як малювати асуку з неонового генезису Євангеліон

Як додати анімацію до SVG з CSS

Створіть меню слайдів

Експорт Анімації ефектів до HTML5

Створіть кількість конкретних стилів CSS та макетів

4 кроки до кращого VDM з Zbrush

Як створити зимове середовище

Як зробити гнучку стрічкову установку

Категорії