Font swap что это

Нестандартные шрифты: как подключить и оптимизировать

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

Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.

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

Выбираем формат шрифта

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

Подключение шрифтов с помощью Google Fonts

Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.

Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.

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

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

Подключение шрифтов с помощью правила @font-face

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

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

Базовый вариант правила:

Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.

Оптимизация

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

FOIT, FOUT и FOFT

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

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

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

FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.

Свойство font-display

У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:

auto — поведение по умолчанию, зависит от браузера.

block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.

swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.

fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.

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

Предзагрузка шрифтов

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

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

Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :

Уменьшение количества глифов шрифта

По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.

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

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

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

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

Полезности

HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.

Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.

Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.

Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.

Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.

Источник

Управляйте шрифтами с помощью CSS font-display

Несколько способов сообщить браузеру, как подключить шрифт.

Загрузка пользовательских шрифтов при первом посещении негативно влияет на производительность веб-страницы. Как веб-разработчики и дизайнеры, мы всегда стараемся создать прекрасный, плавно работающий сайт, но чаще всего две этих цели расходятся. CSS свойство font-display помогает сбалансировать эстетичность и производительность.

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

Fallback

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

Если ваш пользовательский шрифт критически важен для дизайна сайта, для вас есть вариант получше. font-display: swap сразу же использует резервный шрифт. В этом случае, как только завершится загрузка вашего пользовательского шрифта, будь то через секунду или 5, браузер заменит резервный шрифт на ваш пользовательский. Стоит отметить, что смена шрифта может раздражать пользователя, особенно если он уже сфокусировался на чтении.

Block

Если вы все-таки решили, что ваш шрифт очень важен, используйте font-display: block. Это свойство скажет браузеру подождать некоторое время (около трех секунд), чтобы загрузить шрифты. В это время пользователь не будет видеть никакого текста. Через три секунды будет использован резервный шрифт.
С этого момента, неважно, как долго браузер будет загружать шрифты, он заменит недавно загруженный на резервный, даже если пользователь уже начал прокручивать и читать вашу страницу.

Какой способ использовать?

Если производительность стоит на первом месте, а пользовательские шрифты не очень-то вас волнуют, то font-display: fallback – это ваш выбор. Если пользовательский шрифт очень важен, то swap и block для вас.
Имейте в виду, что каким бы способом вы не воспользовались, сначала всё хорошо протестируйте.

Перевод статьи Control web typography with CSS font display
Автор оригинального текста: Umar Hansa

Источник

Свойство CSS font-display

Дата публикации: 2017-05-05

От автора: свойство CSS font-display определяет способ загрузки и отображения файлов шрифтов в браузере. Оно применяется к правилу @font-face, с помощью которого задаются кастомные шрифты.

Значения

Свойство font-display принимает 5 значений:

auto (по уомлчанию). Браузер использует стандартный метод загрузки, который зачастую похож на значение block.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

block. Браузер прячет текст до полной загрузки шрифта. Если точнее, то браузер отрисовывает текст прозрачным цветом, после чего заменяет его на шрифт. Метод также известен как «мигание невидимого текста» или МНТ.

swap. Браузер отображает фолбек шрифт до полной загрузки кастомного шрифта. Метод также известен как «мигание нестилизованного текста».

fallback. Что-то среднее между auto и swap. Браузер скрывает текст примерно на 100ms, и если шрифт не успел загрузиться, отображается фолбек до тех пор, пока не загрузится кастомный шрифт.

optional. Как и fallback, это значение заставляет браузер прятать текст, после чего плавно переходить на фолбек до полной загрузки кастомного шрифта. Однако это значение позволяет браузеру определять, а стоит ли вообще использовать кастомный шрифт. Для этого замеряется скорость соединения. На слабых соединениях кастомный шрифт загружаться не будет.

Зачем нам font-display

До широкой поддержки @font-face наш типографский арсенал был ограничен локальными шрифтами, и были доступны только шрифты, загруженные на компьютер пользователя. Такие шрифты называются «безопасными», так как браузеру не нужно ничего загружать для их рендеринга.

Затем пришло правило @font-face и дало веб-дизайнерам и front-end разработчикам силу, о которой они и подумать не могли раньше. С помощью этого правила мы могли загружать файлы шрифтов на сервер, задавать имена шрифтов и указывать ссылки на них. Это правило дало толчок сервисам типа Google Fonts, которые протолкнули кастомные шрифты в массы. Главное препятствие, отделяющее веб-дизайн от печатного дизайна, было преодолено.

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

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

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

Автор: Geoff Graham

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

Ускоряем веб-шрифты за счет свойства font-display

к.э.н. Лавлинский Николай Евгеньевич, технический директор ООО «Метод Лаб»

Веб-шрифты значительно влияют на скорость на скорость загрузки сайтов. Сложно найти современный дизайн, не использующий дополнительных (подключаемых) шрифтов. Оптимизация веб-шрифтов важна потому, что файлы шрифтов относятся к частично блокирующим ресурсам. То есть, до загрузки этих файлов, часть текста может не показываться вообще. О том, как работают браузеры сейчас и как можно управлять их поведением с помощью font-display, мы поговорим в этой статье.

Как отрисовывают шрифты браузеры

По умолчанию различные браузеры имеют свой алгоритм ожидания шрифтов и рендеринга текста. Существует понятие задержки (timeout), это время которое браузер готов подождать до получения шрифта. Далее происходит показ подменного шрифта (fallback). После этого браузер может получить шрифт и произвести замену на нужный шрифт (swap). В таблице ниже показано поведение различных браузеров по умолчанию.

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

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

И здесь нам на помощь приходит новое свойство font-display.

Свойство font-display

Это новое свойство контролирует поведение браузера по поводу рендеринга шрифтов. Всего существует пять вариантов значений: auto, block, swap, fallback, optional. Указывается оно в блоке @font-face, как одно из свойств.

Варианты свойства font-display.

Таким образом, наиболее интересные варианты для широкого использвоания это fallback и swap. При этом fallback можно рекомендовать для основого текста, так как нежелательно менять значительный массив текста после начального рендеринга. Второй вариант, swap, можно использовать для заголовков, потому что их важно показать максимально быстро, а потом можно безболезненно перерисовать.

Использование свойства font-display позволяет тонко регулировать поведение браузера и по сути обходить ограничения по скорости сети для максимально быстрой отрисовки полезного контента. Конечно, это не отменяет использования всех остальных методов оптимизации веб-шрифтов, но позволяет по-другому взглянуть на приритет загрузки ресурсов. Например, если шрифт загружается в режиме swap, то его можно не указывать с помощью механизма preload (подробнее о preload в этой статье).

Источник

Google Fonts и font-display: особенности взаимодействия

Дата публикации: 2019-01-11

От автора: дескриптор font-display блоков @font-face действительно хорош. Само по себе это имеет большое значение для улучшения воспринимаемой производительности загрузки веб-шрифтов. Загрузка веб-шрифтов — сложная задача, и наличие инструмента, который работает так хорошо, как он, имеет большое значение для Интернета.

Это настолько большое дело, что Pagespeed Insights / Lighthouse от Google предупредят вас, если вы не используете его. Горькая ирония заключается в том, что их в собственных Google Fonts font display никак не используется, а ведь это наиболее часто используемый репозиторий пользовательских шрифтов в Интернете.

По сути, мы, разработчики, хотели бы получить font-display в блоке @font-face, который обслуживает Google, например:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Или какую-то альтернативу, которая так же проста и эффективна.

Похоже, параметры запроса это возможность

Когда вы используете Google Font, они дают вам URL, который обрабатывает таблицу стилей и заставляет шрифт работать. Например:

Они также поддерживают параметры URL для различных вещей, например, для толщины:

Так почему не сделать это…

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Вариант: скачать и самостоятельно разместить их

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

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

Вариант: извлекать и изменять

Робин Рихтсфельд предложил идею запускать для шрифта Ajax-вызов из JavaScript, а затем изменять ответ, чтобы добавить font-display и включить его.

Умно! Хотя я не совсем уверен, как это вписывается в то, как сейчас происходит загрузка шрифтов. Поскольку мы обрабатываем загрузку этого шрифта в JavaScript, производительность загрузки зависит от того, когда и как мы загружаем скрипт, который это выполняет. Если мы собираемся сделать это, возможно, нам следует изучить использование официального веб-шрифта?

Вариант: Service Workers

Как и в предыдущем методе, мы можем извлечь шрифт и изменить его, но сделать это на уровне Service Worker, чтобы иметь возможность его кэшировать (возможно, более эффективно). Адам Лейн предложил это:

Даже Google согласен, что использование Service Workers для помощи Google Fonts — хорошая идея. Workbox, их библиотека для абстрагирования управления Service Workers, использует Google Fonts в качестве демонстрации на главной странице:

Вариант: Cloudflare Workers

Пьер-Люк Жендро решил использовать Cloudflare workers для решения этой проблемы, но затем разработал Supercharge Google Fonts с помощью Cloudflare и Service Workers, очевидно, для еще лучшей производительности. Это его репо.

Вариант: ждать @font-feature-values

Одна из причин, по которой, возможно, Google не торопится (и они говорят то же самое) — есть новое @rule CSS, называемое @font-feature-values, которое предназначено именно для этой ситуации. Вот спецификация:

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

Похоже, это не слишком будет отличаться от остальных методов (лишь немного), но ждать это не так уж и круто.

Автор: Chris Coyier

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Источник