Веб-шрифты¶

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

¶История

До появления веб-шрифтов веб-дизайн был ограничен небольшим набором так называемых «безопасных» шрифтов (web-safe fonts), которые гарантированно присутствовали в большинстве операционных систем: Arial, Times New Roman, Courier New, Verdana, Georgia и некоторые другие. Спецификация CSS (Cascading Style Sheets) версии 2.0, опубликованная в 1998 году, впервые предложила правило @font-face, позволяющее подключать пользовательские шрифты, однако на практике эта возможность не работала из-за отсутствия единого формата и правовых ограничений.

Первым широко поддерживаемым форматом стал Embedded OpenType (EOT), разработанный компанией Microsoft в конце 1990-х годов. EOT включал механизмы сжатия и защиты от копирования, но поддерживался только браузером Internet Explorer. Ситуация изменилась в конце 2000-х годов с появлением формата TrueType (TTF) и OpenType (OTF) в вебе, а также развитием формата WOFF (Web Open Font Format), созданного в 2009 году при участии Mozilla, Opera и Microsoft. WOFF был оптимизирован для передачи по сети: он использовал сжатие (обычно gzip) и содержал метаданные о лицензии. В 2010 году Google запустил сервис Google Fonts, который предоставил бесплатный доступ к сотням шрифтов через API, что стало ключевым фактором массового внедрения веб-шрифтов.

В 2018 году был опубликован стандарт WOFF2, обеспечивающий более высокую степень сжатия (до 30–50 % по сравнению с WOFF) за счёт использования алгоритма Brotli. На 2024 год WOFF2 является рекомендуемым форматом для современных веб-проектов.

¶Технические аспекты

¶Форматы файлов

Основные форматы веб-шрифтов:

• WOFF (Web Open Font Format) — стандартный формат, основанный на TrueType или OpenType, сжатый с помощью gzip. Поддерживается всеми современными браузерами.
• WOFF2 — улучшенная версия WOFF с более эффективным сжатием (Brotli). Обеспечивает меньший размер файла и более быструю загрузку.
• TTF (TrueType) и OTF (OpenType) — исходные форматы настольных шрифтов. Могут использоваться в вебе, но не оптимизированы для передачи по сети (больший размер, отсутствие метаданных).
• EOT (Embedded OpenType) — устаревший формат, использовался только в Internet Explorer 6–8. В настоящее время практически не применяется.
• SVG (Scalable Vector Graphics) — формат для шрифтов, основанный на векторной графике. Использовался в ранних версиях Safari и iOS, но признан устаревшим.

¶Подключение через CSS

Для подключения веб-шрифта используется правило @font-face в таблице стилей CSS. Пример:

``css @font-face { font-family: 'MyCustomFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } ``

Параметр font-display: swap указывает браузеру отображать текст запасным системным шрифтом до полной загрузки пользовательского шрифта, что улучшает восприятие скорости загрузки (FOUT — Flash of Unstyled Text).

¶Производительность и оптимизация

Загрузка веб-шрифтов может замедлять отображение страницы, особенно при большом количестве начертаний или файлов большого размера. Для оптимизации применяются:

• Подмножества (subsetting) — удаление из файла шрифта неиспользуемых символов (например, кириллицы, если сайт только на латинице).
• Предварительная загрузка (preload) — указание браузеру загружать шрифт заранее с помощью <link rel="preload">.
• Кэширование — настройка HTTP-заголовков для долгосрочного хранения шрифтов в кеше браузера.
• Использование только WOFF2 — минимальный размер файла.

¶Классификация веб-шрифтов

¶По способу распространения

1. Бесплатные шрифты — доступны для коммерческого и некоммерческого использования без оплаты. Примеры: Google Fonts, Open Font Library, шрифты с лицензией SIL Open Font License (OFL).
2. Платные шрифты — требуют приобретения лицензии на веб-использование. Часто предоставляются через сервисы-агрегаторы (например, Adobe Fonts, MyFonts, Fontspring).
3. Собственные (кастомные) шрифты — разрабатываются для конкретного бренда или проекта, не предназначены для публичного распространения.

¶По типу гарнитуры

• С засечками (serif) — например, PT Serif, Playfair Display.
• Без засечек (sans-serif) — например, Roboto, Open Sans, Inter.
• Моноширинные (monospace) — например, Fira Code, Source Code Pro.
• Рукописные (script) — например, Pacifico, Lobster.
• Декоративные (display) — например, Bangers, Oswald.

¶Применение

Веб-шрифты используются в:

• Оформлении текстового контента — заголовки, абзацы, цитаты.
• Интерфейсах пользователя — кнопки, меню, формы ввода.
• Логотипах и брендинге — для сохранения фирменного стиля на сайте.
• Иконочных шрифтах — например, Font Awesome, Material Icons, где символы заменяются векторными иконками.

¶Правовые аспекты

Использование веб-шрифтов регулируется лицензионными соглашениями. Большинство настольных шрифтов не разрешают загрузку на сервер и использование в вебе. Для веб-использования требуется специальная веб-лицензия, которая может ограничивать количество просмотров страниц, доменов или серверов. Бесплатные шрифты с открытыми лицензиями (например, SIL OFL) обычно не имеют таких ограничений.

В России действуют общие нормы авторского права, регулирующие использование шрифтов как объектов интеллектуальной собственности. Нарушение лицензионных условий может повлечь гражданско-правовую ответственность.

¶Критика и ограничения

• Влияние на производительность — загрузка нескольких шрифтов может увеличить время загрузки страницы, особенно на медленных соединениях.
• Блокировка отображения текста — при неправильной настройке пользователь может видеть пустое место (FOIT — Flash of Invisible Text) до загрузки шрифта.
• Конфиденциальность — некоторые сервисы (например, Google Fonts) при загрузке шрифтов могут собирать IP-адреса пользователей, что в ряде стран (включая Россию) может требовать согласия на обработку персональных данных.
• Различия в рендеринге — один и тот же шрифт может выглядеть по-разному в разных браузерах и операционных системах из-за особенностей подсистем рендеринга (например, ClearType в Windows, Core Text в macOS).

¶Интересные факты

• Первый в истории веб-шрифт, использованный на коммерческом сайте, был подключён в 1996 году на сайте газеты The Washington Post.
• По состоянию на 2024 год Google Fonts содержит более 1500 шрифтов и используется на миллионах сайтов по всему миру.
• Формат WOFF2 был разработан при участии специалистов из России (компания «ПараТайп» участвовала в тестировании).
• Некоторые шрифты, например, Comic Sans, не рекомендуются для веб-использования из-за низкой читаемости и непрофессионального восприятия.

¶Источники

• Спецификация CSS Fonts Module Level 3 (W3C)
• Спецификация WOFF2 (W3C Recommendation)
• Документация Google Fonts
• Статья «Web fonts» на MDN Web Docs
• Материалы конференции «Шрифты и веб-типографика» (2019, Москва)
• Книга «Типографика в вебе» (А. Лебедев, 2017)