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

Как изменить жирность шрифта в css

  • автор:

font — weight

Свойство font — weight задаёт насыщенность шрифта: от самого тонкого до самого жирного начертания.

Примеры

Скопировать ссылку «Примеры» Скопировано

 div  font-weight: normal; font-weight: bold;> div  font-weight: normal; font-weight: bold; >      

Значения относительно родительского элемента:

 div  font-weight: lighter; font-weight: bolder;> div  font-weight: lighter; font-weight: bolder; >      

Значения в цифрах:

 div  font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900;> div  font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; >      

Как понять

Скопировать ссылку «Как понять» Скопировано

Большинство шрифтов имеют два варианта начертания: обычное normal и жирное bold . Их в основном и используют.

Но браузер может отобразить и более тонкие или толстые варианты, если шрифт их поддерживает. Такие варианты задаются с помощью слов lighter и bolder или в условных единицах от сверхсветлого начертания 100 до сверхжирного или «чёрного» 900 с шагом 100 единиц.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Толщину текста можно задать с помощью ключевых слов или числовым значением:

  • normal — стандартная толщина шрифта. Соответствует значению 400. Значение по умолчанию.
  • bold — жирный набор текста. Соответствует 700.
  • lighter — более тонкий вариант, чем в родительском элементе. Например, светлое начертание Light.
  • bolder — более насыщенный вариант, чем в родительском элементе. Например, сверхжирное начертание Extra Bold.
  • 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 — условные единицы насыщенности, где 400 — это стандартная насыщенность текста. Используются редко, так как большинство шрифтов имеют только обычное и жирное написание.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Если всё же решишь использовать цифры, но у выбранного шрифта нет такого варианта насыщенности, то для значений от 100 до 500 браузер выберет стандартный вариант normal , а от 600 до 900 — жирный шрифт bold .

Ещё примеры

Скопировать ссылку «Ещё примеры» Скопировано

Попробуем задать насыщенность сразу разными способами к разным элементам кода:

   

Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold. В цифровом значении он равен 700 единицам.

Это текст стандартной толщины внутри контейнера

. Он эквивалентен 400 единицам толщины.

Это текст внутри контейнера — и он чуть толще, чем стандартный normal, но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500. В контейнере шрифт тоньше, чем в , внутри которого он находится. Его мы задали с помощью значения lighter.
body> h1>Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold. В цифровом значении он равен 700 единицам.h1> p> Это текст стандартной толщины внутри контейнера p>. Он эквивалентен 400 единицам толщины.p> div> Это текст внутри контейнера div> — и он чуть толще, чем стандартный normal, но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500.br> span>В контейнере span> шрифт тоньше, чем в div>, внутри которого он находится. Его мы задали с помощью значения lighter.span> div> body>
 body  font-family: "Roboto", sans-serif;> /* Зададим толщину заголовка с помощью слова bold. */h1  font-weight: bold;> /* Обычный текст в абзаце 

сделаем стандартным normal */p font-weight: normal;> /* В контейнере текст будет средним по жирности между normal и bold */div font-weight: 500;> /* В элементе текст будет на один уровень меньше по жирности,чем у родительского элемента, внутри которого он находится */span font-weight: lighter;> body font-family: "Roboto", sans-serif; > /* Зададим толщину заголовка с помощью слова bold. */ h1 font-weight: bold; > /* Обычный текст в абзаце

сделаем стандартным normal */ p font-weight: normal; > /* В контейнере текст будет средним по жирности между normal и bold */ div font-weight: 500; > /* В элементе текст будет на один уровень меньше по жирности, чем у родительского элемента, внутри которого он находится */ span font-weight: lighter; >

На практике

Скопировать ссылку «На практике» Скопировано

Денис Русаков советует

Скопировать ссылку «Денис Русаков советует» Скопировано

�� У каждого значения насыщенности есть своё название, принятое в типографике.

Распространённые названия насыщенности

  • 100 — тонкое начертание (thin, hairline);
  • 200 — сверхсветлое (extra light, ultra light);
  • 300 — светлое (light);
  • 400 — нормальное (normal, regular, book);
  • 500 — среднее (medium);
  • 600 — полужирное (semi bold, demi bold);
  • 700 — жирное (bold);
  • 800 — сверхжирное (extra bold, ultra bold);
  • 900 — тяжёлое (black, heavy).

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

Чтобы использовать все 9 начертаний (100–900), шрифт должен их поддерживать. В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в подключаемом шрифте и поэтому надёжнее использовать то значение font — weight , которое вы указали в директиве font — face .

Например, у всеми известного шрифта Roboto, нет насыщенности шрифта равной 800, поэтому при выборе данного значения браузер будет показывать 900, как ближайшее корректное значение.

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Большинство современных шрифтов имеет полный набор начертаний. Для более тонкого управления отображением шрифта используются как раз таки цифровые значения для свойства font — weight .

�� Относительные значения bolder и lighter не используются почти никогда. Причина в том, что они относительные. Как итог если меняется вес шрифта родительского элемента — меняется вес шрифта ребёнка. Но это, чаще всего, не то что нужно. Совет: используй всегда абсолютный вес шрифта.

font-weight

CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.

Интерактивный пример

Синтаксис

font-weight: normal; font-weight: bold; /* Relative to the parent */ font-weight: lighter; font-weight: bolder; font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: unset; 

Значения

Нормальное начертание. То же, что и 400 .

Полужирное начертание. То же, что и 700 .

Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).

Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).

100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900

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

Недоступность заданного значения

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

  • Если задано значение выше 500 , будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
  • Если задано значение менее 400 , будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
  • Если задано значение 400 , будет применено 500 . Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400 .
  • Если задано значение 500 , будет применено 400 . Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400 .

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

Значение относительных весов

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

наследуемое значение жирнее светлее
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

Значение Общее название
100 Тонкий (Волосяной) Thin (Hairline)
200 Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)
300 Светлый Light
400 Нормальный Normal
500 Средний Medium
600 Полужирный Semi Bold (Demi Bold)
700 Жирный Bold
800 Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)
900 Чёрный (Густой) Black (Heavy)

Интерполяция

Значения font-weight интерполируются с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.

Формальный синтаксис

font-weight =
| (en-US)
bolder | (en-US)
lighter

=
normal | (en-US)
bold | (en-US)

Примеры

HTML

p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversations?' p> div> I'm heavybr /> span>I'm lighterspan> div> 

CSS

/* Назначение тексту элемента 

жирного начертания. */ p font-weight: bold; > /* Назначение тексту элемента жирности, которая больше на два уровня, чем normal, но все ещё меньше, чем стандартный bold. */ div font-weight: 600; > /* Назначение тексту элемента жирности, которая на один уровень меньше, чем у его родителя. */ span font-weight: lighter; >

Result

Спецификации

Specification
CSS Fonts Module Level 4
# font-weight-prop
Начальное значение normal
Применяется к all elements and text. Это также применяется к ::first-letter и ::first-line .
Наследуется да
Обработка значения ключевое слово или числовое значение, с bolder и lighter , трансформируемися в действительное значение
Animation type жирность шрифта

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Как сделать жирный текст в CSS

Сделать текст насыщенным можно как в разметке, так и в стилях. Рассмотрим, как изменить насыщенность текста с помощью CSS, и узнаем, в чём плюсы этого метода.

Как выделить текст в CSS

Определите, какой участок текста необходимо выделить и используйте CSS-свойство font-weight , которое отвечает за толщину шрифта.

Часто встречающиеся значения:

  • 400 или normal — обычный шрифт, значение по умолчанию;
  • 700 или bold — полужирный шрифт.

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

.boldtext

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

Весь текст, размеченный классом boldtext , станет жирным.

Свойство font-weight может принимать одно из девяти числовых вариантов насыщенности:

  • 100: Thin;
  • 200: Extra Light (Ultra Light);
  • 300: Light;
  • 400: Normal;
  • 500: Medium;
  • 600: Semi Bold (Demi Bold);
  • 700: Bold;
  • 800: Extra Bold (Ultra Bold);
  • 900: Black (Heavy).

Все эти числовые значения задают степень толщины шрифта от самого тонкого до самого толстого.

Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700). Поэтому остальные значения свойства используются реже.

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

Выделение отдельных предложений и слов

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

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

И затем в стилях пропишите:

.bold

Теперь все слова, обёрнутые в тег span с классом bold , станут жирными.

���� Как и многие языки программирования, медиавыражения поддерживают логические операторы, поэтому мы можем комбинировать выражения

Эффективно и доступно

Что, если весь жирный текст сразу разметить в файле HTML? Для этого же есть специальные теги и .

Теги и используют в особых случаях, при этом важно знать несколько моментов:

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

В каких случаях предпочтительно использовать свойство font-weight :

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

Ещё по теме

  • Как подключить и оптимизировать нестандартные шрифты
  • Как убрать подчёркивание ссылок
  • Как сделать список без точек в HTML

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

  • 13 ноября 2023

Знакомство с CSS

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

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

  • 1 ноября 2023

Увеличение ссылки при наведении

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

  • 13 октября 2023

WOFF больше не нужен

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4–35
  • Edge 12 и 13
  • Safari 3–9.1
  • Firefox 2–38
  • Opera 22 и ниже
  • Android 4.4.4 KitKat и ниже (а это
  • Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

  • 23 сентября 2023

Трясём пароль с помощью CSS

Трясём пароль с помощью CSS

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

Вот что получится в итоге:

  • 7 сентября 2023

Как сделать тёмную тему на сайте

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

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

  • 29 августа 2023

4 способа центрировать текст в CSS

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 

Центрированный текст

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

  • 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

Как скруглить рамку. CSS-свойство border-radius

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

  • 28 июля 2023

CSS-свойство contain

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container
  • 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element
  • 13 июля 2023

font-family

CSS-свойство font-family определяет приоритетный список из одного или нескольких названий семейства шрифтов и/или общее имя шрифта для выбранного элемента.

Интерактивный пример

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

Часто удобно использовать сокращённое свойство font , чтобы задать font-size и другие свойства, которые относятся к шрифту.

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

Свойство font-family определяет список шрифтов в приоритете от высшего к низшему. Процесс выбора шрифта не останавливается после первого шрифта, найденного в системе пользователя. Скорее, выбор шрифта выполняется по одному символу за раз, поэтому если в доступном шрифте нет глифы для нужного символа, пробуются следующие по списку шрифты. (Однако, это не работает в Internet Explorer 6 и ранее.) Когда шрифт доступен только в некоторых стилях , видах (en-US) или размерах , эти свойства могут так же влиять на выбор шрифта.

Синтаксис

/* Имя шрифта и общие семейства шрифтов */ font-family: Gill Sans Extrabold, sans-serif; font-family: "Goudy Bookletter 1911", sans-serif; /* Только общие семейства */ font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: system-ui; font-family: emoji; font-family: math; font-family: fangsong; /* Глобальные значения */ font-family: inherit; font-family: initial; font-family: unset; 

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

В приведённом ниже примере перечислены два семейства шрифтов, первое , а второе как :

font-family: Gill Sans Extrabold, sans-serif; 

Значения

Имя семейства шрифтов. К примеру, «Times» и «Helvetica» это семейства шрифтов. Названия семейства шрифтов, которые содержат пробелы, должны быть взяты в кавычки.

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

Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или имеют фактически зазубренные окончания. Например, «Lucida Bright», «Lucida Fax», Palatino, «Palatino Linotype», Palladio, «URW Palladio», serif.

Глифы имеют гладкие окончания. Например, «Open Sans», «Fira Sans», «Lucida Sans», «Lucida Sans Unicode», «Trebuchet MS», «Liberation Sans», «Nimbus Sans L», sans-serif.

Все глифы имеют одинаковую фиксированную ширину. Например, «Fira Mono», «DejaVu Sans Mono», Menlo, Consolas, «Liberation Mono», Monaco, «Lucida Console», monospace.

Глифы в курсивных шрифтах обычно имеют либо соединительные штрихи, либо другие рукописные характеристики, отличные от наклонных (italic) шрифтов. Глифы частично или полностью связаны, и результат больше напоминает рукописное перо или кисть, чем печатные буквы. Например, «Brush Script MT», «Brush Script Std», «Lucida Calligraphy», «Lucida Handwriting», «Apple Chancery», cursive.

Фэнтезийные шрифты — это прежде всего декоративные шрифты, которые содержат игривое представление персонажей. Например, Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

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

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

Шрифты, специально предназначенные для отображения эмодзи.

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

Валидные имена семейства шрифтов

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

Например, следующие объявления являются валидными:

font-family: Gill Sans Extrabold, sans-serif; font-family: "Goudy Bookletter 1911", sans-serif; 

Следующие объявления являются не валидными:

font-family: Goudy Bookletter 1911, sans-serif; font-family: Red/Black, sans-serif; font-family: "Lucida" Grande, sans-serif; font-family: Ahem!, sans-serif; font-family: test @foo, sans-serif; font-family: #POUND, sans-serif; font-family: Hawaii 5-0, sans-serif; 

Формальный синтаксис

font-family =
[ (en-US) | (en-US) ] (en-US) # (en-US)

=
(en-US) | (en-US)
+ (en-US)

=
generic( + (en-US) ) | (en-US)
(en-US) | (en-US)
+ (en-US)

Примеры

Некоторые общие семейства шрифтов

.serif  font-family: Times, Times New Roman, Georgia, serif; > .sansserif  font-family: Verdana, Arial, Helvetica, sans-serif; > .monospace  font-family: Lucida Console, Courier, monospace; > .cursive  font-family: cursive; > .fantasy  font-family: fantasy; > .emoji  font-family: emoji; > .math  font-family: math; > .fangsong  font-family: fangsong; > 
div class="serif">This is an example of a serif font.div> div class="sansserif">This is an example of a sans-serif font.div> div class="monospace">This is an example of a monospace font.div> div class="cursive">This is an example of a cursive font.div> div class="fantasy">This is an example of a fantasy font.div> div class="math">This is an example of a math font.div> div class="emoji">This is an example of an emoji font.div> div class="fangsong">This is an example of a fangsong font.div> 

Спецификации

Specification
CSS Fonts Module Level 4
# generic-font-families
CSS Fonts Module Level 4
# font-family-prop
Начальное значение зависит от браузера
Применяется к all elements and text. Это также применяется к ::first-letter и ::first-line .
Наследуется да
Обработка значения как указано
Animation type discrete

Совместимость с браузерами

BCD tables only load in the browser

[1] system-ui в данный момент не реализовано, смотри Firefox bug 1226042.

[2] system-ui реализовано в Safari (wkbug.com/151493), возможно будет выпущено в ближайшем времени.

[3] префиксный алиас -apple-system поддерживается в Safari, начиная с OS X 10.11 и iOS 9, а также в Firefox 43 на macOS (Firefox bug 1201318).

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 27 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

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

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