Rose debug info
---------------

woff2 и оптимизации

Сейчас будем экономить 2 Кбайта данных 😎

В iOS, и как я понял на платформе Android, поддерживается два популярных формата шрифтов OpenType и TrueType с соответствующими расширениями .otf и .ttf. Веб же пошел дальше и использует расширение woff2.

На самом деле в вебе поддерживается больше шрифтов, но для заметки хватит и woff2.

В чём соль? Формат WOFF это надстройка над OpenType и TrueType, которая поддерживает сжатие и представляется в виде некоторого контейнера, который явно мы не можем посмотреть.

Быстрый просмотр тут как тут для ttf:

Но woff2 не готов показать свои секреты:

Если всё-таки хочется посмотреть информацию о шрифте в формате woff2, то можно обратиться к Фондю либо сконвертировать его обратно в ttf.

Вторая версия этого формата использует компрессионный алгоритм Brotli, что позволяет еще лучше сжимать данные.

Проведём эксперимент:

  1. Берём шрифт Roboto и начертание Black. Размер получается 168 Кбайт:
> ls -l Roboto-Black.ttf
> -rwxr-xr-x@ 1 vladsuhomlinov  staff  168060 Jan  9  2013 Roboto-Black.ttf
  1. Далее установим утилиту для работы с woff2:
> brew install woff2
> 🍺 /usr/local/Cellar/woff2/1.0.2: 19 files, 408.3KB
  1. Осталось сконвертировать .ttf в .woff2:
> woff2_compress Roboto-Black.ttf
> Processing Roboto-Black.ttf => Roboto-Black.woff2
> Compressed 153024 to 63762.
  1. Проверяем размер нашего шрифта:
> ls -l Roboto-Black.woff2
> -rw-r--r--  1 vladsuhomlinov  staff  63864 Nov  7 19:32 Roboto-Black.woff2
  1. Ура, ура! Мы получили 64 Кбайт — сэкономили 104 Кбайт, ~60%.

Теперь возвращаемся к мобильным устройствам — кажется, поддержки нового формата нет, но это не совсем правда. В iOS и Android .woff2 поддерживается в браузерах Safari и Chrome и вебвью, но на системном уровне нет... или да? 🧐

Верю статье — на Android .woff2 не работает в приложении.

В iOS мы можем использовать шрифты в формате woff2 (но только никому ни слова!). Более того, использование нового формата ничем не отличается от предлагаемой Apple инструкции:

Да еще и экономим на размере шрифтов. Одним словом — успех!

Однако не всё так гладко. За время работы редко, но случались баги с версткой текста — например, неправильно вычислялся его размер. Поэтому самым простым решением для багфикса был переход на стандартные форматы с расширением .ttf 😔

Надеюсь, Apple поддержит новый формат шрифтов официально в будущем, а пока можно самостоятельно экспериментировать, благо система позволяет.

Поделиться
Отправить
Хочу знать о новых заметках
 89   2 мес   iOS   swift   шрифт