aurfon

aurfon

Пикабушник
Дата рождения: 16 марта 1988
поставил 935 плюсов и 139 минусов
Награды:
10 лет на Пикабу
349 рейтинг 12 подписчиков 15 подписок 5 постов 0 в горячем

Front-end - оптимизация - шрифты

Привет.

Продолжим.


Напомню, что не все советы подойдут всем. Всё же лучше перед внедрением в реальный проект потестировать, посмотреть как повлияла "оптимизация".

## Удаление неиспользуемых символов или сегментирование файла

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


Уменьшить размер файла можно как в несколько кб, так и 90% файла. Всё зависит от файла шрифта и количестве символов в нём.


Для удаления символов используй fontmin. Он же конвертирует файл в нужные расширения, то есть можно взять один .ttf файл и сгенерить .eot, .svg, .woff, с удалёнными символами, к сожалению в .woff2 конвертировать он ещё не научился, поэтому можно использовать ttf2woff2


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


Я для примера брал OpenSans размеров 178kb, оставил только кириллицу, латиницу и весь нужный набор знаков. После удаления ненужных мне символов файл стал весить 9kb. Разница колоссальная.


Будь аккуратен можно угробить хинтинг. Для того, чтобы не убить хинтинг надо тонко настраивать fontmin, для каждого шрифта индивидуально. Поэтому рецепта у меня для тебя нет.

## unicode-range

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


Пример для кириллицы


```

@font-face {

font-display: swap;

font-family: 'Lato';

src: url('/fonts/lato-light/lato-light.rus.woff2') format('woff2'), url('/fonts/lato-light/lato-light.rus.woff') format('woff');

font-weight: 300;

font-style: normal;

unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // только кириллица

}

```


unicode-range - задает определенный диапазон символов, которые будут использоваться из шрифта, определенных в @font-face и доступны для использования на текущей странице. Если на странице не используется символ в этом диапазоне, шрифт не загружается; если он использует хотя бы один, загружается весь шрифт.


Таблица unicode-символов


P.S. на этом про оптимизацию шрифтов всё. Ещё есть общие методы оптимизации. которые затрагивают шрифты, но об этом расскажу в следующих частях.

Показать полностью

Front-end - оптимизация - шрифты - рендеринг

Привет.


Давай продолжим оптимизировать шрифты.


# Рендеринг шрифта в браузере

Рендеринг шрифтов в разных браузерах происходит по разному.


Хромиумы ничего не показывают, ждут 3 секунды и если шрифт загрузился, то показывают текст (FOIT), иначе системный.


IE/EDGE - ничего не ждёт, сразу показывает системный шрифт, и после завершения загрузки шрифта перерендеривает шрифт (FOUT).

## FOIT

FOIT (Flash of Invisible Text) — букв. «мелькание невидимого текста», когда во время загрузки веб-шрифта текст не отображается вообще, а после рендерится загруженный шрифт;

## FOUT

FOUT (Flash of Unstyled Text) — букв. «мелькание неоформленного текста», когда во время загрузки веб-шрифта текст отображается шрифтом по умолчанию (напр. системным); (лучше FOIT)

## FOFT

FOFT (Flash of Faux Text) — букв. «мелькание синтезированного текста», когда в промежутке между загрузкой основного веб-шрифта и его вариаций (жирный, курсив и т.д.) вместо этих вариаций браузер отображает особым образом измененный основной шрифт (так называемый «ложный жирный» и «ложный курсив». (чуть лучше FOUT)

## Лучшего варианта нет.

Каждый сам для себя решит как лучше, но можно точно сказать, что это не FOIT.


FOIT заставляет пользователя ждать и ничего не делать некоторое время.


FOUT даёт как можно быстрое взаимодействие с сайтом, но спустя время, когда шрифт загрузится, происходит перерисовка всего шрифта, которое даёт "скачок сайта".


FOFT это тоже самое, что и FOUT, но "скачков сайта" происходит несколько. Т.к. вначале загружается основное начертание шрифта, а остальные (жирное и наклонное) спустя время.

## Font-display

Самым современным вариант будет использовать новое css-свойство font-display.

Поддержка маленькая, но ничего не мешает начать применять его. Браузеры, которые не понимают данное свойство, просто проигнорируют его.

Front-end - оптимизация - шрифты - рендеринг Frontend, Optimization, Шрифт, Длиннопост

Новое свойство имеет несколько значений:

* auto - Использует поведение браузера по умолчанию. Обычно это поведение ‘block’.

* block - Устанавливает короткий период блокировки (3 секунды) и бесконечный период замены.

* swap - Устанавливает период блокировки в 0 секунд и бесконечный период замены.

* fallback - Устанавливает очень короткий период блокировки (100 мс или меньше) и короткий период замены (3 секунды).

* optional - Устанавливает очень короткий период блокировки (100 мс или меньше) и период замены в 0 секунды.


В этом видео очень подробно показано как это работает в живую.

### Периоды

* Период блокировки шрифта

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


* Период подмены шрифта

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


* Период отказа шрифта

Если шрифт не загружен, пользовательский агент воспринимает это как неудачную загрузку и использует запасной шрифт.

### Применение


```

@font-face {

font-display: swap;

font-family: "opensans";

src: url("/fonts/OpenSans/Regular/OpenSans-Regular.woff2") format("woff2"),

url("/fonts/OpenSans/Regular/OpenSans-Regular.woff") format("woff");

font-weight: 400;

}

```


Самым часто применимым является значение - swap. По желанию конечно же можно сменить значение на выгодное вашему проекту.


Очень интересным является значение - optional. В этом случае, если шрифт не успел загрузится за 100ms, то рендеринг шрифта отменяется. Пользователь видит какой-нибудь системный шрифт, то есть может взаимодействовать с сайтом (да не красиво, ничего страшного) Шрифт при этом грузится в фоне. Позже при обновление страницы, шрифт оказывается в кеше и в этом случае происходит рендеринг.

## Font face observer

Если font-display не поддерживается, то без javascript не обойтись.

### Как браузер понимает, когда нужно загрузить шрифт?

Во-первых у шрифта самый высокий приоритет загрузки

Front-end - оптимизация - шрифты - рендеринг Frontend, Optimization, Шрифт, Длиннопост

Если ты подключаешь шрифт с помощью font-face и в стилях есть обращение к шрифту, то загрузка начнётся как можно быстрее. Всё зависит от того, где ты подключаешь стили, это может быть после блокирующего скрипта, что откладывает загрузки и стилей и шрифта.


В идеальном мире это проиходит вот так

1) DOMContentLoaded

2) Загрузка стилей

3) Если есть обращение к семейству шрифта, то загрузка шрифта


Что значит "Если есть обращение к семейству шрифта"?


Допустим, ты объявляешь шрифт


```

@font-face {

font-family: "OpenSans";

src: url('/path/fonts/OpenSans.woff2') format("woff2"),

url('/path/fonts/OpenSans.woff') format("woff")

}

```


а дальше в своих css-файлах нигде к нему не обращаешься, то загрузка шрифта не произойдёт. В этом просто напросто нет смысла и браузер следит за таким поведением.


Вернёмся к javasctipt.


В head секцую нащей страницы добавляем fontfaceobserver и подключим нужные шрифты с помощью плагина.


```

<head>

<script src="path/to/fontfaceobserver.js"></script>

<script>

var openSans = new FontFaceObserver('opensans', {weight: 400});


Promise.all(openSans.load()).then(function() {

document.documentElement.className += 'font-loaded';

});

</script>

</head>

```


Подлючаем одно или несколько начертаний шрифта. И как только они загрузятся добавляем класс font-loaded к тегу html.


В стилях делаем следующий трюк:


```

// список системных шрифтов пополярных операционных систем

html {

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",

"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

}


html.font-loaded {

font-family: "opensans", sans-serif;

}

```


Вначале показываем системные шрифты! Они кстати в современном мире достаточно красивые и удовлетворяют потребности дизайнера. После того как Javascript добавит класс font-loaded, подключаем "opensans".

P.S. это серия постов про оптимизацию. Про шрифты ещё будет дополненение, но не хотелось бы уйти за лимит поэтому решил разбить на несколько частей.

Показать полностью 2

Front-end - оптимизация - шрифты - выбор формата

# Привет.

Веб любит оптимизированное. Давай оптимизируем загрузрузку и рендеринг шрифтов настолько насколько это возможно.


_В современном вебе до сих пор не решена проблема рендера шрифта, поэтому разработчику надо думать как же это сделать самым лучшим образом для пользователя._


## Существующие форматы

На данный момент существуте четыре формата шрифтов


* eot

* ttf

* woff

* woff2


### Поддержка в браузерах

eot - 3.41%

Front-end - оптимизация - шрифты - выбор формата Frontend, Optimization, Шрифт, Длиннопост

ttf - 94.73%

Front-end - оптимизация - шрифты - выбор формата Frontend, Optimization, Шрифт, Длиннопост

woff - 94.36

Front-end - оптимизация - шрифты - выбор формата Frontend, Optimization, Шрифт, Длиннопост

woff2 - 78.53

Front-end - оптимизация - шрифты - выбор формата Frontend, Optimization, Шрифт, Длиннопост

Из этой статистики сразу можно сделать несколько выводов *

1) От eot стоит отказаться, так как поддержка только в Internet Explorer

2) От ttf тоже можно отказаться так как есть пересечение с woff контейнером

* - каждый сам знает своего пользователя и решает какие ему шрифты подключать. Если твой пользователь это Internet Explorer 8, то возвращай eot.

## Вес шрифта

Я рассматривал вес шрифта на примере OpenSans Regular, но соотношение подойдёт для любого шрифта.


woff и woff2 являются оптимизированными контейнерами для веба и поэтому весят меньше.


eot - 106.4kb - 0

ttf - 106.3kb - 0.09%

woff - 63.7kb - 40.13%

woff2 - 47kb - 55.83%

## Подключение шрифта на страницу @font-face

Подключать шрифты надо правильно. Да! шрифт можно подключить не правильно.


@font-face {

font-family: "OpenSans";

src: url('/path/fonts/OpenSans.woff2') format("woff2"),

url('/path/fonts/OpenSans.woff') format("woff"),

url('/path/fonts/OpenSans.ttf') format("ttf"),

url('/path/fonts/OpenSans.eot') format("eot")

}


Здесь стоит обратить внимание на порядок подключения форматов.


Браузеры которые понимают woff2 начнут загружать woff2 версию шрифта и остальные не тронут.


Браузеры которые не понимают woff2 продолжат далее по списку woff, ttf, eot.

## Итого

Если возможно отказывайся от eot и ttf форматов.

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


Используем только woff и woff2.

woff2 и woff весят гораздо меньше eot и ttf, что ускоряет загрузку шрифта на сайте и начало его отрисовки.

У woff2 доля в браузерах достаточно маленькая, что легко компенсируется woff форматом.

P.S. это серия постов про оптимизацию. Про шрифты ещё будет дополненение, но не хотелось бы уйти за лимит поэтому решил разбить на несколько частей.

Показать полностью 4

Здание Ленэнерго в Санкт-Петербурге

Поехал к другу на масленицу, вот мимопроходя решил снять эту красоту =)
https://www.youtube.com/watch?v=PIGPkJtuFLs

World of Tanks. Invite code and bonus code.

Вот сегодня ел в Бургер Кинге, там такие штуки выдают. Сам не играю, но думаю кому-нибудь из вас пригодится.
World of Tanks. Invite code and bonus code. Вот сегодня ел в Бургер Кинге, там такие штуки выдают. Сам не играю, но думаю кому-нибудь из вас пригодится.
Отличная работа, все прочитано!