Как подключить несколько шрифтов css

Как осуществить подключение нескольких шрифтов в css?

Попалась верстка макета к которому прилагается аж 12 файлов .ttf одного и того же шрифта, но с разным начертанием. Шрифт PFBeauSansPro и куча его вариантов Regular, Bold, Italic, italicBold и т.д.

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

@font-face < font-family: BeauSans; src: url(fonts/PFBeauSansPro-Black.ttf); >/*И повторяем этот кусок кода изменяя гарнитуру и имя файла*/

/*Либо можно использовать такой вариант?*/ @font-face < font-family: BeauSans; src: url(fonts/PFBeauSansPro-Black.ttf); src: url(fonts/PFBeauSansPro-BlackItalic.ttf); src: url(fonts/PFBeauSansPro-BlackItalic.ttf); /*И так далее. */ >

Как будет правильно?

• Вопрос задан более трёх лет назад
• 71387 просмотров

Комментировать
Решения вопроса 2

Веб-разработчик

@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-normal.eot"); src: local('☺'), url("../fonts/ptserif-normal.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-normal.woff") format("woff"), url("../fonts/ptserif-normal.ttf") format("truetype"), url("../fonts/ptserif-normal.svg#PT Serif") format("svg"); font-weight: normal; font-style: normal; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-bold.eot"); src: local('☺'), url("../fonts/ptserif-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-bold.woff") format("woff"), url("../fonts/ptserif-bold.ttf") format("truetype"), url("../fonts/ptserif-bold.svg#PT Serif") format("svg"); font-weight: bold; font-style: normal; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-italic.eot"); src: local('☺'), url("../fonts/ptserif-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-italic.woff") format("woff"), url("../fonts/ptserif-italic.ttf") format("truetype"), url("../fonts/ptserif-italic.svg#PT Serif") format("svg"); font-weight: normal; font-style: italic; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-bolditalic.eot"); src: local('☺'), url("../fonts/ptserif-bolditalic.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-bolditalic.woff") format("woff"), url("../fonts/ptserif-bolditalic.ttf") format("truetype"), url("../fonts/ptserif-bolditalic.svg#PT Serif") format("svg"); font-weight: bold; font-style: italic; >

В font-weight можно использовать не ключевые слова, а цифры

100 Ultra Light
200 Thin
300 Light
400 Regular, Normal
500 Roman
600 Medium, SemiBold
700 Bold
800 Heavy, ExtraBold
900 Black

При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта

UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
Svg нужен для Safari версии ниже 5.1

Подробнее смотрите на caniuse.com

@font-face < font-family: 'Web font'; src: url('webfont.woff2') format('woff2'), url('webfont.ttf') format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ url('webfont.woff') format('woff'); font-weight: normal; font-style: normal; >

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

В настройках браузера можно изменить не только общий шрифт по умолчанию, но и шрифты для некоторых общих категорий шрифтов. В основном для 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 является наследуемым. Это значит, что при его установке некоторому элеиенту, оно по цепочке вложенности передаётся всем его потомкам.

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

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.

Как видите, от 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» состоит из следующих стилей (шрифтов):

Поэтому, когда браузер применяет стиль, ему нужно знать не только семейство, но и такие свойства как 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 и так далее.

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

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

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

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

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

Из интересных свойств, которые мы ещё не рассматривали – это 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. Подключение кастомных шрифтов

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

В настройках браузера можно изменить не только общий шрифт по умолчанию, но и шрифты для некоторых общих категорий шрифтов. В основном для 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 является наследуемым. Это значит, что при его установке некоторому элеиенту, оно по цепочке вложенности передаётся всем его потомкам.

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

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.

Как видите, от 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» состоит из следующих стилей (шрифтов):

Поэтому, когда браузер применяет стиль, ему нужно знать не только семейство, но и такие свойства как 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 и так далее.

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

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

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

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

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

Из интересных свойств, которые мы ещё не рассматривали – это 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?

Как подключить два шрифта через CSS? Нужно подключить ArialNarrow Bold и AGAalenBold Roman. И еще вопрос где можно найти эти шрифты?

Отслеживать
задан 29 апр 2014 в 7:40

Скачал оба шрифта с расширением файла ttf. Пытаюсь их конвертировать на сайте fontsquirrel.com/tools/webfont-generator, но выдает ошибку The font is corrupt and can not be converted.

29 апр 2014 в 7:57

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

@font-face < font-family: ArialNarrow Bold; src: url(ArialNarrowBold.ttf); >@font-face < font-family: AGAalenBold Roman; src: url(AGAalenBoldRoman.ttf); >.class1 < font-family: "ArialNarrow Bold"; >.class2

Отслеживать
ответ дан 29 апр 2014 в 7:55
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак

шрифты нужно поискать в интрнете для конвертации можно использовать:

@font-face < font-family: 'шрифт1'; src: url('шрифт1.eot'); src: url('шрифт1.eot?#iefix') format('embedded-opentype'), url('шрифт1.woff') format('woff'), url('шрифт1.ttf') format('truetype'), url('шрифт1.svg#cuprumffuregular') format('svg'); font-weight: normal; font-style: normal; >@font-face

Отслеживать
ответ дан 29 апр 2014 в 7:55
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков

Скачал оба шрифта с расширением файла ttf. Пытаюсь их конвертировать на сайте fontsquirrel.com/tools/webfont-generator, но выдает ошибку The font is corrupt and can not be converted.