Если в свойстве font family указано несколько шрифтов браузер
font - display — это не CSS-свойство, которое можно применить к конкретному элементу. Это так называемый дескриптор. Он применяется только внутри секции правил @font - face и описывает, как будет отображаться текст в зависимости от того, загружен шрифт или нет.
Пример
Как пишется
Как это понять
Чтобы понять, как работает свойство font - display , нужно сделать небольшой экскурс в анатомию загрузки и использования шрифтов.
Для начала пара определений.
Запасной шрифт
В свойстве font - family мы можем через запятую перечислять несколько шрифтов.
С точки зрения браузера запасным является первый из перечисленных шрифтов, который уже загружен. Попытка отобразить запасной шрифт не должна вызывать его загрузки.
Невидимый запасной шрифт
Сначала браузер находит запасной шрифт. Затем создаёт анонимное начертание (анонимный font - face ) с использованием метрик запасного шрифта, но оставляет все символы незакрашенными (невидимыми) и использует это начертание для рендеринга текста. Текст остаётся невидимым, но занимаемое им место рассчитывается исходя из метрик запасного шрифта. Использование невидимого запасного шрифта не должно вызывать его загрузки.
В процессе загрузки страницы браузер должен отображать текстовое содержимое. Для любого символа на странице так или иначе определён шрифт, которым отображается этот символ. Зачастую на странице используются нестандартные шрифты, которых с большой долей вероятности нет в операционной системе пользователя. Для того чтобы такие шрифты подключить к странице, используется блок правил @font - face .
Для таких шрифтов в тот момент, когда символ должен показаться на странице, а шрифт ещё не загружен, запускается временная шкала загрузки. Он состоит из трёх этапов:
- Период блокировки;
- Период замены;
- Период сбоя.
Рассмотрим этапы подробнее.
Период блокировки
Если шрифт ещё не загружен, то в этот период любой элемент, который использует этот шрифт, должен быть отображён с использованием невидимого запасного шрифта.
Если шрифт успешно подгружается в период блокировки, то он используется, как обычно.
Период замены
Этот период следует непосредственно за периодом блокировки. В это время, если необходимый шрифт ещё не загружен, любой элемент, который использует этот шрифт, должен быть отображён запасным шрифтом. Если в период замены шрифт будет успешно загружен, то он будет использоваться, как обычно.
Период сбоя
Начинается сразу после периода замены. Если к этому времени необходимый шрифт ещё не загружен, то он помечается как неудачно загруженный и вместо него используется запасной шрифт. Если же шрифт загружен, то он используется, как обычно.
Теперь вернёмся к font - display . Значения этого свойства определяют длительность периодов таймлайна загрузки шрифта.
auto — стратегия загрузки шрифта определяется браузером в автоматическом режиме. То есть, какую длительность периодов заложили разработчики браузера, такая и будет применяться. Зачастую эта стратегия очень близка к той, что задаётся значением block .
block — стратегия загрузки шрифта, при которой задаётся короткий (порядка 3 секунд) период блокировки и бесконечный период замены. Другими словами, пока грузится шрифт, браузер весь текст показывает невидимым запасным шрифтом, а после загрузки шрифта переключается на этот шрифт.
Используем это значение в исключительных случаях. Например, если страницу невозможно нормально использовать без именно этого шрифта. Яркий пример: иконочный шрифт. До момента загрузки такого шрифта при других стратегиях браузер будет показывать обычный символ алфавита вместо иконки, что может сбить с толку и не дать нормально пользоваться страницей.
swap — задаёт очень короткий (менее 100 миллисекунд) период блокировки и бесконечный период замены. При такой стратегии браузер практически сразу отображает текст запасным шрифтом, а затем, когда подгружен нужный шрифт, переключается на него.
Используем это значение, когда раннее отображение текста является приоритетной задачей, но отображение текста другим шрифтом не нарушает нормального использования страницы. Желательно такую стратегию применять только к небольшим фрагментам текста. Яркий пример: отображение логотипа компании. В целом другой шрифт не усложнит пользование страницей, но правильный логотип важен с точки зрения продвижения бренда.
fallback — такая стратегия, при которой задаётся очень короткий (менее 100 миллисекунд) период блокировки, а так же короткий (порядка 3 секунд) период замены. В этом случае браузер практически сразу отображает текст запасным шрифтом, затем, когда подгружен нужный шрифт, переключается на него, но если шрифт не загрузился, остаётся на запасном шрифте.
Желательно это значение использовать для основного текста, а так же для больших фрагментов текста. Как правило, это значение используется в ситуациях, когда желательно отобразить текст нужным шрифтом, но ничего страшного, если этот текст будет написан другим шрифтом. Использование этого значения помогает сразу же отобразить текст страницы, чтобы пользователь мог прочитать его как можно раньше.
optional — самая сложная стратегия: период блокировки очень короткий (порядка 100 миллисекунд), а вот период замены не задан.
Это значит, что если шрифт стал доступен в период блокировки (то есть, очень быстро), то он и будет использоваться. В противном случае браузер считает, что ни в период блокировки, ни в период замены шрифт загрузить не удалось. Если к этому моменту шрифт ещё не понадобился для отрисовки элемента, браузер будет решать отменить загрузку этого шрифта или продолжить с очень низким приоритетом.
Более того, если браузер решит, что отображение текста важно для пользователя, то он может вообще не начинать загрузку шрифта, а сразу показать запасной шрифт.
Это значение лучше использовать для основного текста либо такого текста, отображение которого нужным шрифтом больше «приятное дополнение», нежели необходимость. Используем это значение, когда нужно отобразить текст как можно быстрее, а дизайнерская точность не является приоритетом.
Подсказки
💡 В чём же отличие fallback от optional ?
При fallback браузер имеет порядка 3 секунд, чтобы переключиться с запасного шрифта на нужный.
При optional браузер может решить, что важнее показать текст как можно скорее и переключения на основной шрифт может вообще не произойти.
Важно понимать, что и при fallback и при optional даже при успешной загрузке нужного шрифта переключение на него может не случиться.
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.
Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.
Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.
Выбираем формат шрифта
Все слышали про TTF и OTF. Но это форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров.
Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 вообще можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF .
Подключение шрифтов с помощью Google Fonts
Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.
Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.
Стоит отметить, что после основного шрифта важно указать веб-безопасный. В случае, если нестандартный шрифт не загрузится, браузер воспользуется альтернативным. Его нужно подобрать максимально похожим на основной шрифт.
Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.
Подключение шрифтов с помощью правила @font-face
Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, fonts . В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2, о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования.
После того, как шрифты добавлены в проект, их нужно подключить в CSS-файле. Для этого используется правило @font-face . В самом базовом варианте оно будет включать:
Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты. Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face .
Базовый вариант правила:
Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.
Оптимизация
Выбор современного формата шрифта, который обладает хорошей степенью сжатия — это только первый шаг к оптимизации. Можно сделать гораздо больше, чтобы увеличить скорость загрузки страницы и сделать пользовательский опыт при взаимодействии с интерфейсом приятнее.
FOIT, FOUT и FOFT
Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.
FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.
FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.
FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.
В разных браузерах логика рендеринга текста во время загрузки шрифта отличается. Например, Chrome и Firefox в течение трёх секунд не отрисовывают ничего, затем используют веб-безопасный шрифт, а после окончания загрузки текст перерисовывается. IE поступает похоже, но при этом не ждёт три секунды. Подобное поведение в разных браузерах можно унифицировать, используя свойство font‑display .
Свойство font-display
У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:
auto — поведение по умолчанию, зависит от браузера.
block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.
Оптимальное значение — swap , его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional .
Предзагрузка шрифтов
Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.
Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.
Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :
Также необходимо добавить тип ресурса, в данном случае — font . Предзагружать можно и другие ресурсы — CSS-файлы, изображения и так далее.
Уменьшение количества глифов шрифта
По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.
Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.
Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.
Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:
В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.
Полезности
HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.
Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.
The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
Try it
Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.
It is often convenient to use the shorthand property font to set font-size and other font related properties all at once.
You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.
The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not stop at the first font in the list that is on the user's system. Rather, font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the latter fonts are tried. When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.
Syntax
The font-family property lists one or more font families, separated by commas. Each font family is specified as either a or a value.
The example below lists two font families, the first with a and the second with a :
Values
The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted. For example: "Comic Sans MS".
Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names. The following keywords are defined:
Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.
For example: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif.
Glyphs have stroke endings that are plain.
For example: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.
All glyphs have the same fixed width.
For example: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace.
Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letter work.
For example: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive.
Fantasy fonts are primarily decorative fonts that contain playful representations of characters.
For example: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.
The default user interface serif font.
The default user interface sans-serif font.
The default user interface monospace font.
The default user interface font that has rounded features.
This is for the particular stylistic concerns of representing mathematics: superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs with distinct meanings.
Fonts that are specifically designed to render emoji.
A particular style of Chinese characters that are between serif-style Song and cursive-style Kai forms. This style is often used for government documents.
Valid family names
Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.
It is a good practice to quote font family names that contain white space, digits, or punctuation characters other than hyphens.
For example, the following declarations are valid:
The following declarations are invalid:
The following example is technically valid but is not recommended:
CSS-свойство font-family определяет приоритетный список из одного или нескольких названий семейства шрифтов и/или общее имя шрифта для выбранного элемента.
Значения разделены запятыми, чтобы указать, что они являются альтернативами. Браузер выберет из списка первый шрифт, который установлен или может быть скачан используя правило @font-face .
Часто удобно использовать сокращённое свойство font , чтобы задать font-size и другие свойства, которые относятся к шрифту.
Вы всегда должны добавлять по крайней мере одно имя общего семейства шрифтов, так как нет гарантии, что какой-либо из указанных шрифтов будет доступен. Это позволит браузеру выбрать подходящий запасной шрифт, когда возникнет необходимость.
Свойство font-family определяет список шрифтов в приоритете от высшего к низшему. Процесс выбора шрифта не останавливается после первого шрифта, найденного в системе пользователя. Скорее, выбор шрифта выполняется по одному символу за раз, поэтому если в доступном шрифте нет глифы для нужного символа, пробуются следующие по списку шрифты. (Однако, это не работает в Internet Explorer 6 и ранее.) Когда шрифт доступен только в некоторых стилях , видах (en-US) или размерах , эти свойства могут так же влиять на выбор шрифта.
Синтаксис
Свойство font-family получает список из одного или более семейства шрифтов, разделённые запятыми. Каждое семейство шрифтов определяется как или .
В приведённом ниже примере перечислены два семейства шрифтов, первое , а второе как :
Значения
Общие семейства шрифтов используются как резервный механизм для сохранения некоторого авторского стиля в момент, когда ни один из желаемых шрифтов недоступен. Общие семейства шрифтов являются ключевыми словами и не должны браться в кавычки. Общее семейство шрифтов должно определяться последним в списке семейств шрифтов. Определены следующие ключевые слова:
serif Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или имеют фактически зазубренные окончания.
Например, " Lucida Bright" , " Lucida Fax" , Palatino , "Palatino Linotype" , Palladio , "URW Palladio" , serif . sans-serif Глифы имеют гладкие окончания.
Например, "Open Sans" , "Fira Sans" , "Lucida Sans" , "Lucida Sans Unicode" , "Trebuchet MS" , "Liberation Sans" , "Nimbus Sans L" , sans-serif . monospace Все глифы имеют одинаковую фиксированную ширину.
Например, "Fira Mono" , "DejaVu Sans Mono" , Menlo , Consolas , "Liberation Mono" , Monaco , "Lucida Console" , monospace. cursive Глифы в курсивных шрифтах обычно имеют либо соединительные штрихи, либо другие рукописные характеристики, отличные от наклонных (italic) шрифтов. Глифы частично или полностью связаны, и результат больше напоминает рукописное перо или кисть, чем печатные буквы. Например, "Brush Script MT ", "Brush Script Std ", "Lucida Calligraphy" , "Lucida Handwriting" , "Apple Chancery" , cursive . fantasy Фэнтезийные шрифты - это прежде всего декоративные шрифты, которые содержат игривое представление персонажей. Например, Papyrus , Herculanum , Party LET , Curlz MT , Harrington , fantasy . system-ui Глифы, взятые из дефолтного шрифта пользовательского интерфейса на данной платформе. Поскольку типографские традиции широко варьируются по всему миру, это общее семейство предназначено для гарнитур, которые не отображаются точно в других общих семействах. math Это семейство предназначено для особых стилистических задач представления математики: верхний индекс и нижний индекс, скобки, которые пересекают несколько строк, вложенные выражения и двойные глифы с различными значениями. emoji Шрифты, специально предназначенные для отображения эмодзи. fangsong Особый стиль китайских иероглифов, который является чем-то средним между стилем с засечками Song и курсивным стилем Кай. Этот стиль часто используется для правительственных документов.
Валидные имена семейства шрифтов
Имена семейств шрифтов должны быть указаны либо в виде строк в кавычках, либо в виде последовательности одного или нескольких идентификаторов без кавычек. Если имя семейства шрифтов содержит цифры или знаки пунктуации, такое имя должно быть заключено в кавычки.
С помощью font - family можно задать семейство шрифта, которым будет написан текст. Можно прописать конкретный шрифт, например "Arial". А можно задать желаемый тип шрифта: например, с засечками serif или без засечек sans - serif .
Пример
Допустим, мы хотим, чтобы текст был набран шрифтом PT Sans. Если такой шрифт не установлен у пользователя, то пускай откроется в Arial. Если и такого нет, то пусть будет стандартный шрифт без засечек:
Как это понять
«PT Sans», «Arial», «Times New Roman» — это примеры семейств шрифтов. С помощью font - family можно задать любой шрифт для любого текстового элемента на странице.
Нужно учесть только то, что шрифты хранятся у пользователя на компьютере. Поэтому, если ты используешь шрифт, которого нет у пользователя, то браузер будет использовать стандартный шрифт.
Как пишется
Обычно в font - family задают сразу несколько шрифтов, перечисляя их через запятую. На первом месте ставят самый редкий шрифт из тех, что хотят использовать для этого элемента. Затем — похожий, но более распространённый шрифт. В самом конце — желаемый тип шрифта. Браузер проходит по списку слева направо и использует первый найденный на компьютере шрифт.
Значения
- Имя шрифта — шрифт, который будет использоваться на странице. Например, Times или Helvetica.
- Семейство шрифтов — прописывается последним на случай, если ни одного из шрифтов нет на компьютере пользователя:
- serif — шрифт с засечками, например, «Times».
- sans - serif — шрифт без засечек, например, «Arial».
- monospace — моноширинные шрифты с одинаковой шириной каждого символа. Похожи на текст, набранный на печатной машинке. Например, шрифт «Courier».
- cursive — курсивный шрифт или italic.
- fantasy — декоративный шрифт.
- system - ui — использует стандартный шрифт на устройстве пользователя.
Ещё пример
Зададим разные шрифты для заголовков и для основного текста:
Подсказки
💡 Мы советуем использовать не больше трёх разных семейств шрифтов на одной странице. Например, один для заголовков, другой для обычного текста и третий для подписей.
💡 Не забывай добавлять желаемый тип шрифта ( serif , sans - serif или другой), так как нет гарантий, что нужный вам шрифт найдётся на компьютере пользователя.
На практике
Алёна Батицкая
🛠 Если в макете используется один из нестандартных шрифтов, то вам потребуется подключить его в свою вёрстку при помощи свойства @font - face .
🛠 Всегда указывай несколько вариантов шрифтов в следующем порядке:
- Кастомный шрифт;
- Стандартный системный шрифт;
- Семейство шрифтов.
Это нужно на случай, если кастомный шрифт по какой-то причине не загрузился на устройстве пользователя. Если не указывать альтернативу (так называемый фолбэк), то при незагрузке кастомного шрифта дизайн страницы скорее всего полностью сломается. Если указать альтернативный системный шрифт, максимально близкий к кастомному по внешнему виду, то дизайн останется прежним 🎉
Семейство шрифтов указывают на случай, если ни кастомный шрифт не загрузился, ни системный шрифт не нашёлся в системе (такое возможно, поскольку в разных ОС разный набор шрифтов).
Читайте также: