Краткое руководство по API веб-шрифтов
Краткое руководство по API веб-шрифтов
Что такое API шрифта?
| Сервис веб-шрифтов | Размещенная библиотека (например, GoogleFonts, AdobeFonts), предоставляющая CSS <link> или фрагменты JavaScript для загрузки файлов шрифтов из CDN. |
| CSS@font‑face | Низкоуровневый API браузера, сообщающий пользовательскому агенту, где загрузить файл шрифта и какое название семейства шрифтов предоставить CSS. |
| API переменных шрифтов | Новый синтаксис (font-variation-settings, axis ranges), позволяющий одному файлу отображать множество стилей (насыщенность, ширина, наклон и т. д.). |
| Дескриптор отображения шрифта | Управляет отображением текста во время загрузки шрифта (auto, block, swap, fallback, optional). |
| Помощники загрузки JavaScript | Дополнительные вспомогательные функции (конструктор FontFace, document.fonts.load()) для загрузки шрифтов «на лету» или предварительной загрузки. |
Все они принадлежат к семейству «Font API», поскольку предоставляют программные способы запроса и использования шрифтов.
Основная терминология CSS
| Свойство / ключевое слово | Значение |
|---|---|
font-family | Имя, которое вы используете в CSS после загрузки шрифта. |
src | URL-адрес(а) фактического файла(ов) шрифта (.woff2, .woff, .ttf, …). |
unicode-range | Подмножество символов, охватываемое заданным файлом — отлично подходит для поднабора. |
font-weight / font-style / font-stretch | Классические статические дескрипторы. |
font-variation-settings | Пары ключ/значение для переменных осей ('wght' 400). |
font-display | Отображение резервной стратегии во время загрузки шрифта. |
Использование встроенного CSS@font‑face (локальное размещение)
1<!-- 1️⃣ Put the font files on your server (or CDN) -->
2<link rel="preload" href="/fonts/Inter-Variable.woff2"
3 as="font" type="font/woff2" crossorigin>
4
5<style>
6 /* 2️⃣ Declare the family */
7 @font-face {
8 font-family: 'Inter Variable';
9 src: url('/fonts/Inter-Variable.woff2') format('woff2');
10 /* Optional – load only Latin characters */
11 unicode-range: U+0000-00FF;
12 /* Show fallback text until the font is ready */
13 font-display: swap;
14 }
15
16 /* 3️⃣ Use it */
17 body {
18 font-family: 'Inter Variable', system-ui, sans-serif;
19 }
20</style>Преимущества: полный контроль над кэшированием, лицензированием и поднаборами; работает в автономном режиме, если вы объединяете файлы.
Googlefonts CSSAPI (наиболее распространенный общедоступный API шрифтов)
1<link href="https://fonts.googleapis.com/css2?
2family=Roboto:wght@400;700&
3family=Open+Sans:ital,wght@0,400;0,600;1,400&
4display=swap"
5rel="stylesheet">Объяснение
| Часть | Что она делает |
|---|---|
family=Roboto:wght@400;700 | Запрос только обычного и полужирного начертания шрифта Roboto. |
family=Open+Sans:ital,wght@0,400;0,600;1,400 | Загрузка обычного/полужирного Roman и курсива (обычного) OpenSans. |
display=swap | Использование резервного текста до завершения загрузки шрифтов (рекомендуется для пользовательского опыта). |
Затем в CSS:
1h1 { font-family: 'Roboto', sans-serif; }
2p { font-family: 'Open Sans', sans-serif; }Советы
- Объединение нескольких семейств в одном запросе — сокращение количества обращений по HTTP.
- Используйте диапазоны осей для переменных шрифтов:
family=Inter:wght@200..800.
Пример переменного шрифта (Googlefonts)
1<link href="https://fonts.googleapis.com/css2?
2family=Inter:wght@200..800&display=swap"
3rel="stylesheet">
4
5<style>
6 .hero {
7 font-family: 'Inter', system-ui;
8 /* Animate weight from thin → bold */
9 font-variation-settings: 'wght' 200;
10 transition: font-variation-settings .6s ease;
11 }
12 .hero:hover { font-variation-settings: 'wght' 800; }
13</style>Почему это важно: Один файл заменяет десятки статических файлов .woff2 → значительно меньшая полезная нагрузка.
API загрузки шрифтов JavaScript («FontFace»)
Когда использовать — вам нужно загрузить шрифт после загрузки страницы (например, при маршрутизации SPA) или вы хотите дождаться его готовности перед отображением пользовательского интерфейса.
1// Create a FontFace object
2const myFont = new FontFace(
3 'Custom Serif',
4 'url(/fonts/CustomSerif-VF.woff2) format("woff2")',
5 { weight: '400 900', style: 'normal' } // optional descriptors
6);
7
8// Add it to the document’s FontFaceSet
9document.fonts.add(myFont);
10
11// Start loading
12myFont.load().then(() => {
13 // Font ready → apply it
14 document.body.style.fontFamily = '"Custom Serif", serif';
15}).catch(err => console.error('Font failed', err));Вы также можете запросить, какие шрифты загружены:
1document.fonts.ready.then(() => console.log('All fonts ready'));AdobeFonts (Typekit) — еще один общедоступный API шрифтов.
1<link rel="stylesheet" href="https://use.typekit.net/xyz123.css">Затем укажите семейства точно так, как указано в комплекте:
1h2 { font-family: "adobe-caslon-pro", serif; }Ключевые отличия от Googlefonts
- Требуется учетная запись Adobe и идентификатор комплекта для встраивания (xyz123).
- Предоставляет параметры загрузки sync и async (
<script>… Typekit.load(); </script>).
Рекомендации по повышению производительности
Подмножество только необходимых глифов — используйте параметр
unicode-rangeилиtext=Google Fonts.Используйте предварительную загрузку для важных шрифтов:
1<link rel="preload" href="/fonts/Inter-Variable.woff2"
2 as="font" type="font/woff2" crossorigin>Установите для
font-displayзначение как минимумswap.
Избегайте «блокировки» рендеринга текста, что вредит CLS (кумулятивному сдвигу макета).Объединяйте семейства в один запрос при использовании GoogleFonts или AdobeFonts.
Кэшировать навсегда — большинство CDN отправляют заголовки Cache‑Control из далекого будущего для файлов woff2.
Краткая справочная шпаргалка
| API | Как выполнить запрос | Типичный пример использования |
|---|---|---|
| CSS @font-face | <style>@font-face{…}</style> + опционально <link rel="preload"> | Шрифты, размещенные на вашем компьютере, полный контроль |
| Google Fonts CSS API | <link href="https://fonts.googleapis.com/css2?..."> | Бесплатные шрифты с простыми параметрами URL |
| Adobe Fonts (Typekit) | <link href="https://use.typekit.net/xxxx.css"> | Платная библиотека с интеграцией с дизайн-системой |
| FontFace JS API | new FontFace(name, src[, descriptors]) | Динамическая загрузка в SPA/runtime bundles |
| Диапазон осей переменного шрифта | family=Inter:wght@200..800 или CSS font-variation-settings | Уменьшение количества файлов и обеспечение плавных переходов между насыщенностями |
Пример кода TL;DR — однострочный для большинства проектов
1<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
2 rel="stylesheet">
3<style>
4 body {font-family:'Montserrat',Arial,sans-serif;}
5</style>✅ Загружает только обычные и жирные шрифты → минимальная загрузка. ✅
display=swapгарантирует быструю подмену текста → хороший UX. ✅ Работает во всех современных браузерах без дополнительного JavaScript.
А что насчет Аспози?
Если вам необходимо манипулировать файлами шрифтов или конвертировать их на стороне сервера (например, генерировать подмножества, конвертировать между TTF/WOFF2 или извлекать метрики глифов), библиотека Aspose.Font предоставляет программный API для .NET, Java и Python. Его можно интегрировать в конвейеры сборки или серверные службы для подготовки ресурсов шрифтов перед их обслуживанием через любой из API-интерфейсов шрифтов, описанных выше.
Готовы встроить?
Скопируйте любой из приведенных выше фрагментов в свой HTML/CSS/JS, и за считанные секунды вы получите готовую к использованию интеграцию Font API. Удачной укладки!