Загрузка шрифтов и устойчивость страницы

В основной версии reading-lab использованы системные семейства. Страница может показывать текст без ожидания собственного файла шрифта, но её характер зависит от доступных шрифтов устройства. Подключение веб-шрифта делает выбор более определённым и одновременно добавляет новое состояние загрузки.

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

Шрифт меняет геометрию текста

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

У ProfessorWeb в текущей оболочке указан локальный Open Sans с обычным и жирным начертаниями. Этот факт описывает исходник сайта. Он не доказывает, что конкретный посетитель получил шрифт без задержки или что все кириллические символы отобразились именно им. Для самостоятельного стенда мы не переносили ресурс автоматически.

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

Не объявляйте любой скачок страницы следствием шрифта. Изображение без известной пропорции, встроенный объект или поздно добавленная область тоже могут сдвигать содержание. Перечень распространённых причин рассматривается в web.dev о CLS. В нашем уроке выделяем один механизм, сохраняя другие условия стенда постоянными.

Ресурс с явными весами

Предположим, вы предоставили собственные разрешённые к использованию файлы fonts/open-sans-regular.ttf и fonts/open-sans-bold.ttf. Их имена здесь задают договор учебного варианта. Следующий полный файл lesson-17.css подключается после итоговых стилей основной версии:

@font-face {
  font-family: "Lab Open Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/open-sans-regular.ttf") format("truetype");
}
@font-face {
  font-family: "Lab Open Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/open-sans-bold.ttf") format("truetype");
}
.reading-lab { font-family: "Lab Open Sans", Arial, sans-serif; }

Листинг не создаёт файлы. До их предоставления итог шестнадцатого урока остаётся основным работающим исходником с системным семейством. Не нужно добавлять фиктивный пустой файл с расширением шрифта ради совпадения дерева папок. Ресурс должен действительно содержать нужное семейство и знаки.

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

font-display: swap задаёт очень короткий период блокировки и последующую возможность замены запасного шрифта. Это стратегия показа, а не средство выравнивания метрик. Значения дескриптора описаны в MDN. Не обещайте, что такая настройка сама устранит изменения высоты статьи.

Запасное семейство выбирают содержательно

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

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

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

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

Подгонка метрик и ограничения

Для уменьшения различий можно подбирать запасное семейство и его метрики. Дескриптор size-adjust масштабирует связанные со шрифтом размеры; его устройство описано в MDN. Но конкретный процент требует сравнения выбранных ресурсов. Произвольное число из чужого проекта не является настройкой нашего макета.

Поэтому здесь не добавляем «оптимальный коэффициент» без наблюдения. Подгонка одной высоты букв также не гарантирует совпадения всех переносов русского текста. У семейства отличаются ширины отдельных глифов, интервалы и знаки. Это ограничение полезнее обещания универсальной формулы.

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

Системный вариант имеет право остаться окончательным. Удобство чтения может обеспечиваться сеткой, размером, ритмом и качеством объяснения. Собственное семейство добавляет узнаваемость, но не исправляет слишком широкую колонку или мелкий код. Решение следует связывать с задачами сайта и стоимостью сопровождения.

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

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

Будущее наблюдение смены шрифта

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

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

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