WOFF2

WOFF2 был разработан Google и стал рекомендацией W3C в марте 2018 года. Он строится на концепции оригинального WOFF, но заменяет сжатие zlib на Brotli — алгоритм сжатия, также разработанный Google, — который достигает значительно лучших степеней сжатия.

Но WOFF2 — это не просто «WOFF с лучшим сжатием». Он вводит преобразование при предобработке, реструктурирующее данные шрифта перед сжатием и делающее их значительно более пригодными для сжатия. Для контуров TrueType это означает применение предсказательного кодирования к координатам глифов — каждая точка кодируется как дельта от прогнозируемого значения, а не как абсолютная координата. Результатом является более избыточный поток байт, который Brotli может агрессивно сжимать.

Именно этот двухшаговый подход — доменно-специфическая предобработка с последующим сжатием общего назначения — объясняет, почему WOFF2 неизменно создаёт наименьшие файлы шрифтов среди всех форматов.

WOFF2 применяет к исходным данным шрифта двухфазный конвейер сжатия:

• Фаза 1: Преобразование при предобработке — специфические для шрифтов преобразования реструктурируют данные для максимизации сжимаемости. Для контуров глифов TrueType используется предсказательное кодирование координат — каждая точка кодируется как разница от прогнозируемой позиции, что даёт значительно меньшие числа. Аналогичные преобразования применяются к другим таблицам шрифта.
• Фаза 2: Сжатие Brotli — предобработанные данные затем сжимаются с помощью Brotli, который сочетает скользящее сжатие LZ77 с кодированием Хаффмана и встроенным статическим словарём. Brotli достигает на 20-30% лучшего сжатия, чем zlib, для типичных данных шрифтов.

На стороне браузера процесс обращается вспять: декомпрессия Brotli с последующими обратными преобразованиями для восстановления исходных таблиц шрифта. Несмотря на дополнительный шаг, декомпрессия WOFF2 фактически быстрее, чем WOFF1 — Brotli разработан для быстрого декодирования, и меньший файл быстрее передаётся по сети.

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2');
  font-display: swap;
}

.icon { font-family: 'MyIcons'; }
.icon-home::before { content: '\E001'; }

Обратите внимание, что мы указываем только один элемент src — только WOFF2. При охвате 97%+ браузеров многие современные проекты больше не нуждаются в запасном формате. Директива font-display: swap указывает браузеру немедленно отображать текст с использованием запасного шрифта, пока загружается шрифт иконок, предотвращая невидимый текст.

WOFF2 пользуется широкой поддержкой во всех современных браузерах. Единственным существенным пробелом является Internet Explorer, который был снят с поддержки Microsoft в июне 2022 года.

Совокупный глобальный охват составляет приблизительно 97%. Оставшиеся ~3% состоят почти исключительно из устаревших установок IE и очень старых мобильных браузеров.

Чтобы наглядно показать преимущество WOFF2 в сжатии, приведём типичные размеры файлов для шрифта иконок, содержащего 200 глифов:

Экономия увеличивается с ростом набора иконок. Шрифт из 500 глифов может занимать 200 КБ в TTF, 120 КБ в WOFF и всего 82 КБ в WOFF2. При тысячах загрузок страниц эти килобайты напрямую транслируются в более быстрое время отрисовки и снижение затрат на трафик.

Всегда. WOFF2 должен быть форматом по умолчанию для любого развёртывания шрифтов иконок для веба. Он обеспечивает наименьшие файлы, быстрейшую декомпрессию и практически универсальную поддержку браузеров.

Единственный сценарий, когда вы не стали бы использовать WOFF2 — это если вы нацелены на Internet Explorer, в этом случае дополните его WOFF в качестве запасного варианта:

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2'),
       url('icons.woff') format('woff');
  font-display: swap;
}

Современные браузеры возьмут файл WOFF2; IE 11 откатится к WOFF. Все получат шрифт — и все получат его сжатым.