Как указать шрифт в css
Перейти к содержимому

Как указать шрифт в css

  • автор:

Работа с шрифтами в CSS. Подключение кастомных шрифтов

Установка шрифта в CSS осуществляется с помощью свойства font-family . В качестве значения мы можем указать как один шрифт, так и несколько, перечислив их через запятую:

body { font-family: "Segoe UI", Arial, sans-serif; }

В этом примере мы для тега установили шрифты в следующем порядке:

  1. Segoe UI;
  2. Arial;
  3. sans-serif.

sans-serif — это не шрифт, а ключевое слово в CSS, с помощью которого мы указываем общее семейство шрифтов. В данном случае, семейство шрифтов без засечек. По факту оно будет обозначать шрифт, который установлен в браузере по умолчанию для этого семейства шрифтов.

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

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

В случае, когда ни один из заданных шрифтов не найден, будет использоваться тот, который указан в настройках браузера по умолчанию. В Chrome посмотреть, какой шрифт используется по умолчанию можно в разделе «Настроить шрифты»: «Настройки» -> «Внешний вид» -> «Настроить шрифты». Кстати, здесь же его при необходимости можно изменить на другой:

Настройка шрифтов в браузере Chrome

В настройках браузера можно изменить не только общий шрифт по умолчанию, но и шрифты для некоторых общих категорий шрифтов. В основном для serif , sans-serif и monospace . Изменить дефолтный шрифт для других семейств ( fantasy , cursive и так далее) в большинстве случаев нельзя.

Пример, как в очень популярном CSS-фреймворке Bootstrap 5 выполняется установка шрифта для тега и, следовательно, по умолчанию для всех вложенных в него элементов:

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

Шрифты, в названии которых имеется хотя один пробел, должны быть заключены в кавычки. Наприпер: «Segoe UI», «Helvetica Neue» и так далее.

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

Кроме этого в начале указано ключевое слово system-ui . Какой шрифт оно обозначает? Чтобы это понять, рассмотрим какие вообще имеются основные ключевые слова, которые могут использоваться для указания общих семейств шрифтов:

  • system-ui – общее семейство системных шрифтов; оно указывает, что в качестве шрифта будет использоваться системный шрифт операционной системы, но так как разные операционные системы используют разные системные шрифты, то в Windows это будет «Segoe UI», в macOS – «San Francisco», в Android – «Roboto».
  • -apple-system – обозначает, что на устройствах Apple (iPhone, iPad и Mac) нужно использовать системный шрифт операционной системы.
  • serif – шрифт с засечками. Например: Georgia, Times New Roman.
  • sans-serif – шрифт без засечек. Например: Arial, Tahoma, Trebuchet MS, Verdana, San Francisco, Segoe UI.
  • monospace – моноширинный шрифт, то есть такой у которого все символы (глифы) имеют одинаковую ширину. Например: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New.
  • cursive – шрифты, имитирующие почерк. Например: Comic Sans MS, Comic Sans, Apple Chancery, Bradley Hand, Snell Roundhand.
  • fantasy – декоративные шрифты, которые в основном используются для названий, заголовков и так далее. Например: Impact, Luminari, Chalkduster, Jazz LET, Stencil Std.
  • emoji – шрифты, специально предназначенные для отображения эмодзи. Например: Apple Color Emoji, Segoe UI Emoji.

Свойство font-family является наследуемым. Это значит, что при его установке некоторому элеиенту, оно по цепочке вложенности передаётся всем его потомкам.

Наследование свойства font-family

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

body { font-family: Arial, sans-serif; } h1, h2, h3 { font-family: "Times New Roman", serif; }

Размер шрифта (font-size)

В CSS установка размера шрифта осуществляется с помощью свойства font-size .

Например, назначим для

размер шрифта, равный 18px:

p { font-size: 18px; }

Задавать размеры шрифта можно в различных единицах измерения:

  • px – в пикселях;
  • em – относительно размера шрифта родителя;
  • rem – относительно размера шрифта элемента ;
  • % – относительно размера шрифта родителя; аналогично em , только значение указывается в процентах;
  • vw , vh , vmin , vmax – относительно viewport;

Другие единицы измерения ( mm , cm , pt , pc ) сейчас практически не используются.

Кроме использования единиц измерения, задавать размер тексту можно ещё с помощью следующих ключевых слов:

  • xx-small (9px);
  • x-small (10px);
  • xx-small (13px);
  • medium – начальное значение font-size (обычно 16px);
  • large (18px);
  • x-large (24px);
  • xx-large (32px);
  • xxx-large (48px).

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

Кроме этих ключевых слов имеются ещё два: smaller и larger . Они позволяют сделать размер шрифта немного меньше или больше, чем у родителя.

Насыщенность шрифта (font-weight)

Установка насыщенности шрифту (толщины букв) в CSS осуществляется с помощью свойства font-weight :

/* установим жирный текст для всех элементов с классом title */ .title { font-weight: bold; }

Задать толщину тексту можно с помощью числа или ключевого слова. Список значений от самого тонкого до самого жирного начертания:

  • 100 – тонкое;
  • 200 – сверхсветлое;
  • 300 – светлое;
  • 400 или normal – стандартное (значение по умолчанию);
  • 500 – среднее;
  • 600 – полужирное;
  • 700 или bold – жирное;
  • 800 – сверхжирное;
  • 900 – тяжёлое.

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

Например, установим заголовкам стандартное начертание текста:

h2 { font-weight: normal; }

На этом рисунке приведены начертания стандартного шрифта «Segoe UI» от 100 до 900.

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

Как видите, от 100 до 300 этот шрифт имеет одинаковое начертание. Также оно не отличается в диапазонах: 500-600 и 800-900.

Например, установим заголовкам внутри .card среднюю толщину букв тексту:

.card h2 { font-weight: 500; }

Кроме абсолютных значений у font-weight имеются ещё относительные: lighter и bolder . С помощью них мы можем установить соотвественно более тонкое или толстое начертание шрифту, чем то, которое имеется у его родителя:

/* в элементах , расположенных непосредственно в 

, текст будет на один уровень меньше по жирности, чем у родительского элемента */ p > span { font-weight: lighter; }

На практике относительные значения bolder и lighter практически не используются.

Стиль шрифта (font-style)

С помощью свойства font-style мы можем установить начертание шрифта:

  • normal – обычное (значение по умолчанию);
  • italic – курсивное;
  • oblique – наклонное;
  • oblique 14deg – с указанием угла наклона текста.

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

Допустимые значения — это градусы от -90deg до 90deg включительно.

Подключение кастомных шрифтов

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

По факту в font-family мы указываем не сам шрифт, а его семейство. Семейство – это полный набор стилей, а стиль – это отдельный и конкретный шрифт в этом семействе. Например, семейство «Roboto» состоит из следующих стилей (шрифтов):

Список шрифтов из которых состоит семейство шрифтов Roboto

Поэтому, когда браузер применяет стиль, ему нужно знать не только семейство, но и такие свойства как font-style (начертание) и font-weight (насыщенность).

Кроме этого, стоит отметить про новый шрифтовой формат — вариативные шрифты (variable fonts). До их появления каждый стиль реализовывался как отдельный файл шрифта. В случае вариативных шрифтов все стили могут содержаться в одном файле. Кроме этого, описание вариативных шрифтов может сопровождаться кроме font-style и font-weight ещё другими свойствами. Например, font-variant , font-stretch и так далее. Но эти шрифты не так популярны и в этой теме мы их рассматривать не будем.

Пример подключения шрифта «Roboto» к странице и установка его по умолчанию в качестве базового шрифта для сайта:

/* подключение шрифта Roboto */ @font-face { font-family: "Roboto"; src: local("Roboto"), local("Roboto-Regular"), url("/assets/fonts/roboto-regular.woff2") format("woff2"); } /* установка Roboto в качестве основного шрифта */ body { font-family: Roboto, sans-serif; }

Деректива @font-face должна обязательно содержать следующие два свойства:

  • font-family – семейство шрифтов, к которому относится этот вариант шрифта (при этом данное название необязательно должно соотвествовать настоящему имени шрифта);
  • src – один или несколько источников, из которых браузер может взять данный шрифт.

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

В свойстве src источник можно определять с помощью функции local() и url() . Функция local() предназначена для поиска шрифта на устройстве пользователя по его имени, а url() – для загрузки шрифта из файла по указанному URL-адресу. Этот файл в данном формате должен быть доступен по указанному адресу.

Очень часто local() и url() используют вместе. Это позволяет, если доступен шрифт на устройстве поользователя, то использовать его. Если его нет, то загрузить его с сервера по указанному URL:

@font-face { font-family: "Roboto"; /* браузер сначала попробует найти шрифт на устройстве пользователя по имени Roboto */ src: local("Roboto"), /* если не получилось, то попробует найти его на устройстве пользователя по имени Roboto-Regular */ local("Roboto-Regular"), /* если не получилось, то загрузит его с сервера по указанному URL */ url("/assets/fonts/roboto-regular.woff2") format("woff2"); }

В этом примере с помощью format() мы указали формат этого шрифта. В данном случае «woff2» – Web Open Font Format. Данный формат поддерживают все современные браузеры. Использовать какие-то другие форматы не нужно. Но, если нужна поддержка старых браузеров, то тогда нужно добавить другие форматы шрифтов, которые они поддерживают. Например, woff, ttf или ещё какие-то другие:

@font-face { font-family: "Roboto"; src: local("Roboto"), local("Roboto-Regular"), url("/assets/fonts/roboto-regular.woff2") format("woff2"), /* если шрифт не доступен или не подерживается woff2, то загрузит woff */ url("/assets/fonts/roboto-regular.woff") format("woff"), /* если шрифт не доступен или не подерживается woff, то загрузит ttf */ url("/assets/fonts/roboto-regular.ttf") format("ttf"), }

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

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

Например, для того чтобы браузер для отрисовки курсивного текста ( font-style: italic ) с насыщенностью 400 ( font-weight: 400 ) использовал соотвествующую версию шрифта нужно добавить ещё один @font-face :

/* шрифт Roboto для стандартного начертания */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(/assets/fonts/roboto-regular.woff2) format('woff2'); } /* шрифт Roboto для курсива */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: local('Roboto Italic'), local('Roboto-Italic'), url(/assets/fonts/roboto-italic.woff2) format('woff2'); }

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

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

/* для жирного начертания */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url(/assets/fonts/roboto-bold.woff2) format('woff2'); }

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

Google Fonts – это бесплатный сервис, с помощью которого можно очень просто подключить на страницу нестандартный шрифт. Google Fonts содержит более 1500 семейств шрифтов и все они имеют открытый исходный код.

Наиболее популярными семействами на этом сервисе являются: Roboto, Open Sans, Noto Sans, Montseratt, Lato, Poppins, Inter, Oswald и так далее.

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

Выбор необходимых начертаний в нужных семействах в бесплатном сервисе Google Fonts

После этого скопировать сгенерированный HTML-код и вставить его раздел :

Теперь выбранные шрифты можно использовать в свойстве font-family :

/* по умолчанию для основного текста */ body { font-family: 'Roboto', sans-serif; } /* для заголовков */ h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

Если перейти по ссылке, которую нам даёт Google Fonts, то мы увидим ничто иное как CSS-код, содержащий множество @font-face для подключения каждого конкретного выбранного варианта шрифта.

Содержимое URL-адреса, которую нам даёт Google Fonts

Из интересных свойств, которые мы ещё не рассматривали – это font-display и unicode-range .

Свойство font-display предназначено для настройки поведения текста на странице во время загрузки шрифта. Этому свойству можно установить одно из следующих значений:

  • auto – определяется браузером; в большинстве своём он близок к block ;
  • block – если в течение 3 секунд нужный шрифт не загрузился, браузер его покажет невидимым запасным шрифтом; после загрузки отображение текста будет переключено на него;
  • swap – если менее чем за 100мс шрифт не загрузился, то текст будет отображён запасным шрифтом; после того как нужный шрифт будет загружен текст будет переключен на него;
  • fallback – если менее чем за 100мс шрифт не загрузился, то текст будет отображён запасным шрифтом; после этого, если в течение 3 секунд нужный шрифт загрузился, то текст будет переключен на него; но если этого не произошло, текст останется на запасном шрифте;
  • optional – похож на fallback , но в отличие от него здесь период для замены 3 секунды не задан; поэтому решение переключать отображение текста или нет на нужный шрифт остаётся за браузером.

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

Например, такой диапазон символов Unicode используется в Google Fonts для поддержки кириллицы:

/* киррилица */ font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts

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

Этот небольшой кусочек кода означает, что ко всем тегам

применен шрифт Verdana. Свойство font-family устанавливает, какой шрифт или семейство шрифтов будет использоваться. Корректное отображение этого стиля в браузере пользователя зависит от того, установлен ли на его компьютере заданный шрифт. В нашем случае, если на компьютере пользователя отсутствует шрифт Verdana, то браузер отобразит шрифт, установленный по умолчанию.

В свое время дизайнерам приходилось дополнительно указывать несколько запасных шрифтов на случай, если на компьютере пользователя будет отсутствовать основной. Допустим, вы желаете оформить текст шрифтом Verdana, а в качестве запасных установить шрифты Trebuchet MS, Geneva и любой шрифт без засечек. Записывается это таким образом:

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

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

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

О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии.

Веб-шрифты

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

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

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

Поддержка форматов

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

Формат файла шрифта Какие браузеры поддерживают
TTF Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0
EOT Поддерживает только Internet Explorer
WOFF Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0, Android Browser 4.1-4.3
SVG Chrome до версии 37 (включительно), Safari, iOS Safari, Android Browser

Примечание: актуальную информацию о поддержке форматов шрифтов вы всегда можете узнать на сайте caniuse.com. В строку поиска необходимо ввести название формата (например, ttf).

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

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

Предположим, у вас есть свой уникальный шрифт под названием MyUniqueFont в формате TTF и вы желаете, чтобы основной текст веб-страницы отображался именно этим шрифтом. Первое, что нужно сделать, это скопировать файл шрифта в папку, где находятся все остальные файлы сайта. Чтобы не создавать беспорядок, вы можете создать отдельную папку специально для шрифтов, назвав ее, к примеру, fonts .

Далее нам необходимо дать команду браузеру загрузить шрифт MyUniqueFont . Записывается это с помощью директивы @font-face следующим образом:

@font-face < font-family: MyUniqueFont; src: url('fonts/MyUniqueFont.ttf'); >

Свойство font-family в данном случае играет другую роль: с помощью него мы присваиваем имя шрифту, чтобы потом использовать это имя при написании стиля:

Во второй строке указывается путь к файлу шрифта. В нашем примере файл MyUniqueFont.ttf находится в папке fonts . У вас URL-адрес может отличаться.

Шрифты Google Fonts

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

Скриншот: интерфейс сервиса Google Fonts

Примечание: вся коллекция шрифтов от Google доступна на сайте Google Fonts. На странице можно воспользоваться различными фильтрами для поиска шрифтов по категориям, толщине, алфавиту.

Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .

Шаг 1: выберите начертание

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

Шаг 2: выберите алфавит

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

Шаг 3: добавьте код на сайт

Далее Google предлагает подключить шрифт одним из нескольких способов: или стандартным, или через директиву @import , или с помощью JavaScript. Мы рассмотрим первые два варианта.

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

Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

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

Скриншот: этапы настройки шрифта Google

Шаг 4: создайте стиль

После осуществления предыдущих шагов можно начать применять шрифт. Как записывается такое правило CSS, вы уже видели ранее:

Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Чтобы затем придать шрифту жирное начертание, запишите CSS-стиль таким образом:

Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).

Главными преимуществами сервиса Google Fonts является:

  • легкость использования (разобраться с сервисом сможет даже новичок, а весь необходимый код генерируется автоматически – остается только скопировать его);
  • доступность шрифтов (нет необходимости за них платить);
  • предусмотрены все используемые форматы шрифтов (это означает, что каждый браузер сможет загрузить именно тот формат шрифта, с которым он работает).

Среди недостатков сервиса – не очень большое разнообразие шрифтов, особенно кириллических. К слову, в интернете есть и другие похожие сервисы, например, TypeKit (платный).

Итоги

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

Как задать свои шрифты в CSS?

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

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

В этом мануале мы покажем, как использовать @font-face для загрузки шрифта на веб-страницу. Для этого мы скачаем популярный открытый шрифт, Roboto Mono. При помощи свойства font-display мы настроим отображение шрифта – это позволит нам создать лучший пользовательский интерфейс.

Требования

  • Редактор кода (например nano или Visual Studio Code).
  • Веб-браузер.
  • Базовые навыки работы с HTML. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

1: Загрузка шрифтов и создание веб-страницы

Прежде чем мы начнем изучать правило @font-face, мы должны создать тестовую веб-страницу и каталог.

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

mkdir -p ./website/fonts/

Перейдите в корневой каталог нового проекта, который называется website:

Из этого каталога мы будем запускать все остальные команды.

Теперь мы воспользуемся командой curl, чтобы загрузить шрифт Roboto Mono. Мы используем популярное приложение google-webfonts-helper, которое позволяет загружать несколько шрифтов непосредственно из сети доставки контента Google при помощи одного аккуратного GET-запроса.

Давайте загрузим два разных по стилю и толщине вида Roboto Mono, regular and 700italic.

curl -o ./fonts/fontfiles.zip «https://google-webfonts-helper.herokuapp.com/api/fonts/roboto-mono?download=zip&subsets=latin,latin-ext&variants=regular,700italic&formats=woff,woff2,ttf»

Обратите внимание на то, как мы указали виды шрифтов из семейства Roboto Mono, которые нам нужны. Затем мы указали необходимые форматы для каждого шрифта: ttf, woff и woff2. Формат woff2 – это самый современный формат веб-шрифтов, но woff2 все еще не поддерживается некоторыми браузерами. Поэтому мы также загрузим запасной вариант – формат woff, который имеет широкую поддержку (включая Internet Explorer 9) и формат TrueType, или ttf. В итоге мы получим отличный охват, но во время работы над CSS мы также предоставим больше альтернативных вариантов на основе стандартных шрифтов. Свойство font-display поможет управлять загрузкой шрифтов на странице в разных браузерах.

Теперь извлеките загруженные шрифты в папку ./fonts. На машинах Linux и macOS используйте следующую команду:

unzip ./fonts/fontfiles.zip -d ./fonts

Теперь изучите содержимое папки ./fonts:

Вы увидите в ней шесть новых файлов – файл .ttf, .woff и .woff2 для каждого шрифта.

Загрузив шрифты, мы можем переходить к работе с CSS и стилизации HTML-элементов.

2: Правило @font-face

Теперь мы попробуем применить загруженные шрифты с помощью свойства @font-face.

С помощью nano или другого текстового редактора создайте и откройте файл style.css:

Добавьте следующий код, который содержит определение правила @font-face с путями к файлам:

font-family: ‘Roboto Mono’, monospace;

src: url(fonts/roboto-mono-v12-latin-regular.woff2) format(‘woff2’),

font-family: ‘Roboto Mono’, monospace;

src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format(‘woff2’),

font-family: ‘Roboto Mono’, monospace;

font-family: ‘Roboto Mono’, monospace;

Давайте подробно рассмотрим этот код.

Определять правила @font-face всегда нужно в главном файле CSS. Самая простая версия правила @font-face требует свойств font-family и src. В первом блоке кода мы указываем Roboto Mono в качестве значения для свойства font-family, а в src предоставляем пути к трем файлам в разных форматах – это делается в порядке убывания приоритета.

Во втором блоке свойство font-family имеет то же значение, но тут мы указываем пути к версии 700italic. Затем мы определяем два свойства: font-weight и font-style. Эти свойства помогут нам определить, где мы хотим использовать вторую версию Roboto Mono.

В следующих двух блоках мы определяем индивидуальные стили для элементов и

. Обратите внимание, мы используем свойство font-family для обоих элементов, но добавляем font-weight и font-style в блок для . Благодаря этому заголовки H1 будут отображаться шрифтом Roboto Mono 700italic, а не Roboto Mono regular.

Сохраните и закройте файл.

Теперь давайте создадим небольшую HTML-страницу с тегами и

.

Создайте и откройте новый файл index.html:

Добавьте в файл следующий код, который определяет заголовок и строку текста:

Roboto Mono font, 700italic

Roboto Mono font, regular

Сохраните и закройте файл.

Загрузите index.html в браузере. Вы увидите, что заголовок отображается шрифтом Roboto Mono 700italic, а текст абзаца – Roboto Mono regular:

Roboto Mono font, 700 italic

Roboto Mono font, regular

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

3: Управление отображением шрифтов с помощью font-display

С помощью font-display мы можем точно контролировать отображение шрифтов на странице. Это может значительно улучшить пользовательский опыт.

Иногда при использовании нестандартных шрифтов пользователь может столкнуться с FOUT (вспышкой неоформленного текста – flash of unstyled text) или FOIT (вспышкой невидимого текста – flash of invisible text) при первой загрузке страницы. Некоторые браузеры предпочитают отображать текст сразу, даже если нестандартный шрифт еще не загружен. Браузер отобразит нужный шрифт после полной загрузки, но в результате пользователь столкнется с FOUT. Также бывает, что браузер на короткое время скрывает текст, если шрифт еще не загрузился – это FOIT. Если шрифт не загружается в течение определенного периода, браузер использует запасной шрифт.

Один из способов справиться с FOUT –использовать инструмент Font Style Matcher, который помогает найти резервный шрифт, максимально приближенный к пользовательскому (чтобы изменение шрифта не было таким резким). Однако для более гибкой обработки подобных проблем можно использовать свойство font-display.

Чтобы устранить проблемы с загрузкой шрифтов на странице, font-display принимает одно из 5 значений:

  • auto: использует стандартное поведение браузера (которое может отличаться от браузера к браузеру).
  • block: текст скрывается на короткий период и отображается после загрузки пользовательского шрифта. Считается, что это значение имеет бесконечный период подмены шрифта.
  • swap: браузер не скрывает текст, а меняет шрифт на пользовательский, когда он становится доступным. Это значение также предусматривает бесконечный период подмены.
  • fallback: текст скрывается на очень короткий период (это называется период блокировки шрифта), а затем у браузера есть короткий период подмены. Если пользовательский шрифт не загружается в течение периода подмены, он не загружается вообще.
  • optional: на загрузку тексту дается очень короткий период блокировки шрифта (~100 мс). Если шрифт не загружается в течение этого периода блокировки, браузер использует резервный шрифт, а пользовательский шрифт после этого вообще не отображается. Однако браузер будет пытаться незаметно загрузить и кешировать пользовательский шрифт: при последующих загрузках страницы пользовательский шрифт станет доступным в кеше, а затем отобразится на странице.

Значение optional параметра font-display – хорошее решение для многих проблемных ситуаций отображения шрифтов. Давайте используем это значение его в нашем файле CSS.

Вернитесь в style.css:

Добавьте в файл выделенный код:

font-family: ‘Roboto Mono’, monospace;

src: url(fonts/roboto-mono-v12-latin-regular.woff2) format(‘woff2’),

font-family: ‘Roboto Mono’, monospace;

src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format(‘woff2’),

CSS/Шрифты и текст

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

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

p  font-family: Verdana, Helvetica, Arial, sans-serif; > 

Существуют 5 семейств шрифтов:

  1. serif — шрифты с засечками
  2. sans-serif — шрифты без засечек
  3. monospace — моноширинные
  4. cursive — курсивные
  5. fantasy — декоративные

Пример, как выглядят такие шрифты:

serif sans-serif monospace cursive fantasy

font-style [ править ]

Существуют три значения этого свойства:

  1. normal — обычный (значение по умолчанию)
italic — курсив
  1. oblique — наклонный

Браузеры последний стиль обычно отображают как курсивный

font-variant [ править ]

  1. normal — обычный (значение по умолчанию)
  2. small-caps — капитель, то есть все строчные символы становятся уменьшенными заглавными

font-weight [ править ]

Это свойство устанавливает вес (насыщенность) шрифта.

  1. 100
  2. 200
  3. 300
  4. 400 или normal (значение по умолчанию)
  5. 500
  6. 600
  7. 700 или bold
  8. 800
  9. 900

font-size [ править ]

Возможные значения этого свойства:

  1. абсолютные константы: xx-small, x-small, small, medium (значение по умолчанию), large, x-large, xx-large
  2. относительные константы: smaller, larger
  3. абсолютные и относительные единицы измерения CSS

line-height [ править ]

Межстрочный интервал, часто применяется вместе с font-size

  1. normal — нормальное значение (по умолчанию)
  2. number — число (больше либо равно 0), на которое умножается текущий размер шрифта
  3. length — фиксированное значение в единицах измерения CSS
  4. % — проценты от текущего размера шрифта

font [ править ]

Это сокращённая форма записи свойств шрифта. Необходимо лишь указать font-size и font-family. Остальные свойства шрифта указываются при желании

p  font: bold italic small-caps 150%/1.4 Arial, Helvetica, sans-serif; > 

Также можно указывать ключевые слова: caption, icon, menu, message-box, small-caption, status-bar

web-шрифты [ править ]

Свойство, которое позволяет отображать на экране компьютера любой шрифт. Впервые появилось в CSS2. Используется правило @font-face

Шрифты бывают следующих типов:

  1. eot — embedded opentype (.eot)
  2. ttf — truetype (.ttf)
  3. otf — opentype (.ttf, .otf)
  4. svg — svg-шрифты (.svg, .svgz)
  5. woff — web open font format (.woff)

Текст [ править ]

text-align [ править ]

  1. left — по левому краю (значение по умолчанию)
  2. right — по правому краю
  3. center — по центру
  4. justify — по ширине

letter-spacing/word-spacing [ править ]

Интервал между буквами/словами

  1. normal — нормальное значение (по умолчанию)
  2. length — значение в единицах измерения CSS (допускаются отрицательные значения)

text-decoration [ править ]

  1. underline — подчёркнутый текст
  2. overline — линия над текстом
  3. line-through — перечёркнутый текст
  4. blink — мигающий текст
  5. none — отмена всех эффектов (значение по умолчанию)

text-indent [ править ]

Отступ первой строки

  1. length — фиксированное значение в единицах измерения CSS (значение по умолчанию равно 0)
  2. % — проценты от ширины строки

text-transform [ править ]

  1. none — нет трансформации (значение по умолчанию)
  2. uppercase — преобразование всех строчных символов в заглавные
  3. lowercase — преобразование всех заглавных символов в строчные
  4. capitalize — преобразование первой буквы каждого слова в заглавную

vertical-align [ править ]

Выравнивание элемента по вертикали

Применяется только к строчным элементам и к ячейкам таблицы

Возможные значения для строчных элементов:

  1. baseline — по базовой линии (значение по умолчанию)
  2. sub — нижний индекс
  3. super — верхний индекс
  4. top — верх элемента выравнивается с самым высоким элементом строки
  5. text-top — верх элемента выравнивается с верхом шрифта родительского элемента
  6. middle — по середине
  7. bottom — по нижней части
  8. text-bottom — низ элемента выравнивается с низом шрифта родительского элемента
  9. проценты
  10. величины CSS

Для ячеек таблицы:

  1. baseline — содержимое ячейки по базовой линии (значение по умолчанию)
  2. top — по верхнему краю
  3. bottom — по нижнему краю
  4. middle — по середине ячейки таблицы

Для строчных элементов это свойство выравнивает сам элемент, а не его содержимое. Для ячеек таблицы — наоборот

white-space [ править ]

Пробелы между словами

  1. normal — обычное поведение (значение по умолчанию)
  2. pre — пробелы и переносы учитываются
  3. nowrap — пробелы и переносы не учитываются
  4. pre-wrap — пробелы учитываются, текст переносится
  5. pre-line — пробелы не учитываются, текст переносится

text-shadow [ править ]

Добавление тени к тексту (CSS3)

  1. h-shadow — смещение тени по горизонтали
  2. v-shadow — смещение тени по вертикали
  3. blur — радиус размытия тени
  4. color — цвет тени
  5. none — нет тени (значение по умолчанию)

text-overflow [ править ]

Видимость текста, если он не влезает в ширину блока (CSS3)

  1. clip — текст обрезается по размеру блока (значение по умолчанию)
  2. ellipsis — текст обрезается с добавлением многоточия

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *