Свойство font | CSS справочник
CSS свойстваОпределение и применение
CSS свойство font устанавливает все свойства шрифта в одном объявлении.
Свойства, которые можно установить (в указанном порядке!):
- font-style (стиль шрифта)
- font-variant (капитель — малые заглавные)
- font-weight (жирность шрифта)
- font-size (размер шрифта) / line-height (задает расстояние между строками)
- font-family (семейство шрифта элемента)
Значения font-size (размер шрифта) и font-family (шрифт элемента) являются обязательными. Если один из других значений отсутствуют, то будут установлены значения по умолчанию.
Поддержка браузерами
CSS синтаксис:
font:"font-style font-variant font-weight font-size / line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit";
JavaScript синтаксис:
object.style.font = "italic small-caps bold 12px/30px courier"
Значения свойства
| Значение | Описание |
|---|---|
| font-style | Задает стиль шрифта для элемента. Значение по умолчанию normal. |
| font-variant | Указывает, должен ли текст быть выведен в капители (оставить без модификаций строчные буквы или установить строчные знаки как уменьшенные заглавные). Значение по умолчанию normal. |
| font-weight | Устанавливает насколько жирным будет выглядеть текст в элементе. Значение по умолчанию normal. |
| font-size/line-height | Задает размер шрифта элемента / задает расстояние между строками. Значение по умолчанию medium / normal. |
| font-family | Задает шрифт для элемента. |
| caption | Устанавливает шрифт, который используется для заголовков элементов управления (например — кнопки). |
| icon | Устанавливает шрифт, который используется для текста в иконках (значках). |
| menu | Устанавливает шрифт, который используется в раскрывающихся меню. |
| message-box | Устанавливает шрифт, который используется в диалоговых окнах. |
| small-caption | Более мелкая версия шрифта, который устанавливается с помощью значения caption. |
| status-bar | Устанавливает шрифт, который используется в статус баре. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS1Наследуется
Да.Анимируемое
Да.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства font-weight.</title>
<style>
.test {
font : italic small-caps bold 12px/30px courier;;
background-color : orange;
}
.test2 {font : caption;}
.test3 {font : icon;}
.test4 {font : menu;}
.test5 {font : message-box;}
.test6 {font : small-caption;}
.test7 {font : status-bar;}
</style>
</head>
<body>
<p class = "test">font: italic small-caps bold 12px/30px courier;background-color:orange;</p>
<p class = "test2">font: caption;</p>
<p class = "test3">font: icon;</p>
<p class = "test4">font: menu;</p>
<p class = "test5">font: message-box;</p>
<p class = "test6">font: small-caption;</p>
<p class = "test7">font: status-bar;</p>
</body>
</html>
font | CSS | WebReference
Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.
Краткая информация
| Значение по умолчанию | Зависит от использования |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
В качестве обязательных значений свойства font указывается размер шрифта и его семейство. Остальные значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.
Допускается в качестве значения использовать ключевые слова, определяющие шрифт различных элементов операционной системы пользователя.
- caption
- Шрифт для текста элементов форм вроде кнопок.
- icon
- Шрифт для текста под иконками.
- menu
- Шрифт применяемый в меню.
- message-box
- Шрифт для диалоговых окон.
- small-caption
- Шрифт для подписей к небольшим элементам управления.
- status-bar
- Шрифт для строки состояния окон.
Пример
p { font: 12pt/10pt sans-serif; }Из типографики пошла запись указывать через слэш размер шрифта и высоту строки. Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — высоту строки. В качестве семейства указывается рубленый шрифт (sans-serif).
p { font: bold italic 110% serif; }Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задаётся в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).
p { font: normal small-caps 12px/14px fantasy; }Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font
Объектная модель
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
Свойство font — свойство-сокращение для шрифтов
Свойство font представляет собой свойство-сокращение, в котором можно использовать следующие свойства CSS: font-size, font-style, font-weight, line-height, font-family, font-variant.
Синтаксис
селектор {
font: [font-style|font-variant|font-weight] font-size [/line-height] font-family;
}
Обязательными свойствами являются font-size и font-family, остальные можно опускать, сохраняя порядок.
Свойства font-style, font-variant, font-weight можно переставлять в любом порядке относительно друг друга.
Обратите внимание на то, что свойство line-height пишется через слеш после свойства font-size.
Пример
Давайте сделаем курсивный текст размером 15px, с типом Arial, и межстрочным интервалом в 30px:
<p>
какой-то текст...
</p> p {
font: italic 15px/30px Arial;
text-align: justify;
}
:
Пример
Еще пример:
<p>
какой-то текст...
</p> p {
font: bold 16px/20px "Times New Roman", Georgia, serif;
text-align: justify;
}
:
Пример
Назначим только размер шрифта и семейство, опустив другие свойства:
<p>
какой-то текст...
</p> p {
font: 18px Arial;
text-align: justify;
}
:
Пример
Если задать только размер шрифта, он не применится, так как обязательно должно быть задано еще и семейство шрифта:
<p>
какой-то текст...
</p> p {
font: 30px;
text-align: justify;
}
:
CSS свойство font
Универсальное свойство, позволяющее определить все свойства шрифта за одну декларацию.
Установить можно следующие свойства (в соответствующем порядке): «font-style font-variant font-weight font-size/line-height font-family».
Значения font-size и font-family обязательны. Если остальные значения не указываются, то будут использованы значения по умолчанию.
Свойство line-height устанавливает расстояние между строками.
CSS синтаксис
font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| font-style | Устанавливает стиль шрифта. Значение по умолчанию «normal». |
| font-variant | Устанавливает способ представления строчных букв. Значение по умолчанию «normal». |
| font-weight | Устанавливает «жирность» шрифта. Значение по умолчанию «normal». |
| font-size/line-height | Устанавливает размер шрифта и расстояние между строк. Значение по умолчанию «normal». |
| font-family | Устанавливает семейство шрифта. Значение по умолчанию зависит от браузера. |
| caption | Шрифт для текста элементов форм вроде кнопок. |
| icon | Шрифт для текста под иконками. |
| menu | Шрифт применяемый в меню. |
| message-box | Шрифт для диалоговых окон. |
| small-caption | Шрифт для подписей к небольшим элементам управления. |
| status-bar | Шрифт для строки состояния окон. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Определяем все свойства шрифта за одну декларацию
p.ex1 {
font: 15px arial, sans-serif;
}
p.ex2 {
font: italic bold 12px/30px Georgia, serif;
}
font | CSS справочник
Поддержка браузерами
| 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство font является универсальным, оно позволяет одновременно задать сразу несколько параметров шрифта. Для этого используются специальные ключевые слова: caption, icon, menu, message-box, small-caption, status-bar или значения следующих свойств:
Как и в любом универсальном свойстве, значения, которые не были установлены принимают значения по умолчанию. Но для свойства font есть несколько правил использования, если эти условия не выполняются, свойство является недопустимым и полностью игнорируется:
- размер высоты строки (line-height) должен указываться сразу после размера шрифта, через косую черту (слэш) — «/«
- если будут устанавливаться значения свойств font-style, font-variant и font-weight, то они должны быть определены перед font-size
- font-family определяется последним, после всех остальных свойств (значение inherit недопустимо к применению)
| Значение по умолчанию: | не определено |
|---|---|
| Применяется: | ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line |
| Анимируется: | да, смотрите каждое свойство, входящее в состав краткого метода, отдельно |
| Наследуется: | да |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.font=»italic small-caps bold 12px arial,sans-serif» |
Синтаксис
font: font-style font-variant font-weight font-size/line-height|caption|icon|menu|message-box |small-caption|status-bar|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| font-style | Задает стиль шрифта. Смотрите возможные значения у свойства font-style. |
| font-variant | Указывает разновидность шрифта. Смотрите возможные значения у свойства font-variant. |
| font-weight | Задает жирность шрифта. Смотрите возможные значения у свойства font-weight. |
| font-size/line-height | Задает размер шрифта и высоту строки. Смотрите возможные значения у свойств font-size и line-height. |
| font-family | Определяет семейство шрифта. Смотрите возможные значения у свойства font-family. |
| caption | Шрифт используется для текста элементов управления (кнопок, раскрывающихся списков и т.п.). |
| icon | Шрифт используется для текста под иконками. |
| menu | Шрифт используется в раскрывающимися меню. |
| message-box | Шрифт используется для диалоговых окон. |
| small-caption | Тоже самое, что и caption, только используется уменьшенный шрифт (для небольших элементов). |
| status-bar | Шрифт используется для строки состояния окна. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
p.ex1 { font: 15px arial,sans-serif; }
p.ex2 { font: italic bold 12px/1 Georgia,serif; }
</style>
</head>
<body>
<p>Пример демонстрирует, как можно изменить текст
на странице с помощью свойства font. </p>
<p>С помощью свойства font можно отредактировать текст,
например поменяв толщину шрифта, его размер и высоту строки.</p>
</body>
</html>
Результат данного примера в окне браузера:
СSS Свойство font
Пример
Установить некоторые свойства шрифта с помощью стенографического объявления:
p.a {font: 15px arial, sans-serif;
}
p.b
{
font: italic bold 12px/30px Georgia, serif;
}
Определение и использование
Свойство font — это сокращенное свойство для:
Требуются значения размера шрифта и семейства шрифтов. Если одно из других значений отсутствует, используются их значения по умолчанию.
Пимечание: Свойство line-height задает расстояние между линиями.
| Значение по умолчанию: | Значение по умолчанию для свойств шрифта |
|---|---|
| Унаследованный: | да |
| Анимируемый: | да, см. раздел отдельные свойства. Прочитать о animatable Попробовать |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.font=»italic small-caps bold 12px arial,sans-serif» Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| font | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Пимечание: См. раздел индивидуальная поддержка браузера для каждого значения ниже.
CSS Синтаксис
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
Значения свойств
| Свойство/Значение | Описание |
|---|---|
| font-style | Задает стиль шрифта. Значение по умолчанию — «normal» |
| font-variant | Задает вариант шрифта. Значение по умолчанию «normal» |
| font-weight | Задает вес шрифта. Значение по умолчанию «normal» |
| font-size/line-height | Задает размер шрифта и высоту строки. Значение по умолчанию «normal» |
| font-family | Задает семейство шрифтов. Значение по умолчанию зависит от браузера |
| caption | Использует шрифт, используемый заголовками элементов управления (например, кнопки, раскрывающиеся списки и т.д.) |
| icon | Использует шрифт, используемый метками значков |
| menu | Использует шрифты, используемые раскрывающимися меню |
| message-box | Использует шрифты, используемые диалоговыми окнами |
| small-caption | Уменьшенная версия шрифта заголовка |
| status-bar | Использует шрифты, используемые в строке состояния |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитать о initial |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Демонстрация некоторых других значений свойств шрифта
<p>Шрифт браузера, используемый в заголовках элементов управления.</p>
<p>Шрифт браузера, используемый в метках значков.</p>
<p>Шрифт браузера, используемый в выпадающих меню.</p>
<p>Шрифт браузера, используемый в диалоговых окнах.</p>
<p>Уменьшенная версия шрифта подписи.</p>
<p>Шрифт браузера, используемый в строке состояния.</p>
Связанные страницы
CSS Учебник: CSS Шрифт
HTML DOM Справочник: Свойство font
шрифты — расширенные возможности свойства font-variant
Современные технологии шрифтов поддерживают множество расширенных типографских и языковых функций. Используя их, один шрифт может предоставлять глифы для широкого спектра лигатур, контекстных и стилистических альтернатив, табличных и старых символов, маленьких прописных, автоматических дробей, штрихов и альтернатив, специфичных для данного языка.
Чтобы позволить авторам контролировать эти возможности шрифта, свойство font-variant было расширено для CSS3. Теперь оно функционирует как сокращение для набора свойств, которые обеспечивают контроль над стилистическими функциями шрифта.
Рис. 1. Один символ, множество вариаций глифаРасширенные возможности свойств шрифтов
1. Кернинг: свойство font-kerning
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 33, 29 -webkit-
Safari: 9.1, 7 -webkit-
Opera: 20, 16 -webkit-
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 71
Samsung Internet: 4
Кернинг — это контекстная настройка межглифевого интервала. Свойство font-kerning позволяет избирательно изменять интервал между символами в зависимости от их формы. Для шрифтов, которые не содержат данных кернинга, это свойство не будет иметь видимого эффекта.
Свойство наследуется.
| font-kerning | |
|---|---|
| Значения: | |
| auto | Указывает, что кернинг применяется по усмотрению пользовательского агента на основе ряда факторов: размера текста, скриптов или других факторов, влияющих на скорость обработки текста. Значение по умолчанию. |
| normal | Указывает, что кернинг применяется. |
| none | Указывает, что кернинг не применяется. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
font-kerning: inherit;
font-kerning: initial;
Рис. 2. Соседние буквы без кернинга и с кернингом2. Лигатуры: свойство font-variant-ligatures
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 34, 15 -moz-
Chrome: 48, 21 -webkit-
Safari: 9.1
Opera: 35, 15 -webkit-
iOS Safari: 9.3
UC Browser for Android: 11.8 -webkit-
Chrome for Android: 71
Samsung Internet: 5, 4 -webkit-
Лигатуры и контекстные формы — это способы объединения глифов в один знак-глиф для создания более гармоничных форм. Свойство font-variant-ligatures определяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов.
Свойство наследуется.
| font-variant-ligatures | |
|---|---|
| Значения: | |
| normal | Указывает, что общие функции по умолчанию включены. Для шрифтов OpenType основные лигатуры и контекстные формы включены по умолчанию, а дискреционные и исторические лигатуры — нет. Значение по умолчанию. |
| none | Указывает, что все типы лигатур и контекстных форм, охватываемых этим свойством, явно отключены. В ситуациях, когда лигатуры не считаются необходимыми, это может повысить скорость рендеринга текста. |
| common-ligatures | Включает отображение общих лигатур (функции OpenType: liga, clig). Для шрифтов OpenType общие лигатуры включены по умолчанию. |
| no-common-ligatures | Отключить отображение общих лигатур (функции OpenType: liga, clig). |
| discretionary-ligatures | Включает отображение дискреционных лигатур (функция OpenType: dlig). Какие лигатуры являются дискреционными или необязательными, определяется конструктором типов, поэтому авторам нужно будет обратиться к документации данного шрифта, чтобы понять, какие лигатуры считаются дискреционными. |
| no-discretionary-ligatures | Отключает отображение дискреционных лигатур (функция OpenType: dlig). |
| historical-ligatures | Включает отображение исторических лигатур (функция OpenType: hlig). |
| no-historical-ligatures | Отключает отображение исторических лигатур (функция OpenType: hlig). |
| contextual | Включает отображение контекстных альтернатив (функция OpenType: calt). Хотя эта функция не является строго лигатурой, как и лигатуры, она обычно используется для согласования форм глифов с окружающим контекстом. Для шрифтов OpenType эта функция включена по умолчанию. |
| no-contextual | Отключает отображение контекстных альтернатив (функция OpenType: calt). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;
font-variant-ligatures: no-common-ligatures;
font-variant-ligatures: discretionary-ligatures;
font-variant-ligatures: no-discretionary-ligatures;
font-variant-ligatures: historical-ligatures;
font-variant-ligatures: no-historical-ligatures;
font-variant-ligatures: contextual;
font-variant-ligatures: no-contextual;
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
Рис. 3. Варианты лигатур3. Подстрочные и надстрочные формы: свойство font-variant-position
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: —
Safari: —
Opera: —
iOS Safari: —
UC Browser for Android: —
Chrome for Android: —
Samsung Internet: —
Свойство font-variant-position используется для включения типографских и надстрочных глифов. Это альтернативные глифы, разработанные в том же блоке, что и глифы по умолчанию, и предназначенные для размещения на той же базовой линии, что и глифы по умолчанию, без изменения размера или изменения положения базовой линии. Они разработаны таким образом, чтобы соответствовать окружающему тексту и быть более читаемыми, не влияя на высоту строки.
Свойство наследуется.
Рис. 4. Подстрочные глифы (вверху) против типичных синтезированных индексов (внизу)| font-variant-position | |
|---|---|
| Значения: | |
| normal | Означает отсутствие включенных функций. Значение по умолчанию. |
| sub | Включает отображение вариантов нижнего индекса (функция OpenType: subs). |
| super | Включает отображение надстрочных вариантов (функция OpenType: sups). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;
font-variant-position: inherit;
font-variant-position: initial;
Рис. 5. Верхний индекс альтернативного глифа (слева), синтезированный верхний индекс глифов (в середине) и неправильная смесь двух символов (справа)4. Преобразование в заглавные буквы: свойство font-variant-caps
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 52
Safari: —
Opera: 39
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 52
Samsung Internet: 6
Свойство font-option-caps контролирует использование альтернативных глифов для заглавных букв.
Свойство наследуется.
| font-variant-caps | |
|---|---|
| Значения: | |
| normal | Означает отсутствие функций преобразования. Значение по умолчанию. |
| small-caps | Включает отображение маленьких заглавных букв (функция OpenType: smcp). Глифы маленьких заглавных букв обычно используют форму заглавных букв, но уменьшены до размера строчных букв. |
| all-small-caps | Позволяет отображать заглавные буквы как заглавными, так и строчными буквами (функции OpenType: c2sc, smcp). При использовании обычных маленьких заглавных букв любой заглавный символ отображается в полном верхнем регистре, а строчные — меньше. Однако при использовании этого ключевого слова эти заглавные буквы отображаются с меньшим размером. |
| petite-caps | Включает отображение миниатюрных заглавных букв (функция OpenType: pcap) Если шрифт не поддерживает миниатюрные заглавные буквы, свойство ведет себя так, как будто вместо него было задано small-caps. |
| all-petite-caps | Позволяет отображать маленькие заглавные буквы как в верхнем, так и в нижнем регистре (функции OpenType: c2pc, pcap). В противном случае ведет себя так, как будто вместо него было задано all-small-caps. |
| unicase | Включает отображение сочетания маленьких заглавных букв для прописных букв с обычными строчными (функция OpenType: unic). |
| titling-caps | Предназначен для заголовков и названий в тексте (функция OpenType: titl). Включает отображение специальных заглавных букв для заголовков, с менее жирным начертанием, чем у обычных заголовков. Если шрифт не поддерживает эту функцию, ключевое слово не имеет видимых действий. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;
font-variant-caps: inherit;
font-variant-caps: initial;Доступность этих глифов зависит от того, определена ли данная функция в списке возможностей шрифта. Для обратной совместимости с CSS 2.1, если указаны small-caps или all-small-caps, но глифы small-caps недоступны для данного шрифта, браузеры должны имитировать шрифт small-caps, например, взяв обычный шрифт и заменив глифы для строчных букв масштабированными версиями глифов для заглавных букв по аналогии с text-transform: uppercase (заменить глифы как для заглавных, так и для строчных букв в случае all-small-caps).
Если для шрифта, который не поддерживает эти функции, указано petite-caps или all-petite-caps, свойство ведет себя так, как если бы small-caps или all-small-caps были указаны соответственно.
Если для шрифта, который не поддерживает эту функцию, указано unicase, свойство ведет себя так, как будто small-caps применлся только к заглавным буквам в нижнем регистре.
Рис. 6. text-transform: uppercase и font-variant-caps: small-caps5. Форматирование цифр: свойство font-variant-numeric
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 52
Safari: 9.1
Opera: 39
iOS Safari: 9.3
UC Browser for Android: 11.8
Chrome for Android: 71
Samsung Internet: 6.2
Свойство font-variant-numeric контролирует использование альтернативных глифов для чисел, дробей и порядковых маркеров.
Свойство наследуется.
| font-variant-numeric | |
|---|---|
| Значения: | |
| normal | Функции преобразования не применяются. Значение по умолчанию. |
| lining-nums | Выравнивает все цифры по базовой линии текста (функция OpenType: lnum). |
| oldstyle-nums | Отображает некоторые знаки (3, 4, 7, 9) таким образом, чтобы они уходили нижним краем под базовую линию текста (функция OpenType: onum). |
| proportional-nums | Включает отображение пропорциональных чисел (функция OpenType: pnum). |
| tabular-nums | Включает отображение табличных чисел — одинаковой ширины, которые легко выравниваются, как в таблицах (функция OpenType: tnum). |
| diagonal-fractions | Включает символы дробей, в которых числитель и знаменатель уменьшены и разделены косой чертой (функция OpenType: frac). |
| stacked-fractions | Включает символы дробей, где числитель и знаменатель уменьшены, поставлены друг над другом и разделены горизонтальной чертой (функция OpenType: afrc). |
| ordinal | Включает отображение буквенных форм, используемых с порядковыми номерами — специальные глифы для порядковых числительных, например, 1st, 2nd, 3rd, 4th в английском (функция OpenType: ordn). |
| slashed-zero | Включает отображений нулей перечеркнутыми косой линией (функция OpenType: zero). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-numeric: normal;
font-variant-numeric: lining-nums;
font-variant-numeric: oldstyle-nums;
font-variant-numeric: proportional-nums;
font-variant-numeric: tabular-nums;
font-variant-numeric: diagonal-fractions;
font-variant-numeric: stacked-fractions;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: oldstyle-nums stacked-fractions;
font-variant-numeric: inherit;
font-variant-numeric: initial;
Рис. 7. Примеры значений свойства font-variant-numeric6. Визуализация восточноазиатского текста: свойство font-variant-east-asian
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 63
Safari: —
Opera: 50
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 63
Samsung Internet: —
Свойство font-variant-east-asian позволяет контролировать замену и размер глифов в восточноазиатском тексте.
Свойство наследуется.
| font-variant-east-asian | |
|---|---|
| Значения: | |
| normal | Функции преобразования не применяются. Значение по умолчанию. |
| jis78 | Включает рендеринг форм JIS78 (функция OpenType: jp78). |
| jis83 | Включает рендеринг форм JIS83 (функция OpenType: jp83). |
| jis90 | Включает рендеринг форм JIS90 (функция OpenType: jp90). |
| jis04 | Включает рендеринг форм JIS2004 (функция OpenType: jp04). |
| simplified | Включает рендеринг упрощенных форм (функция OpenType: smpl). |
| traditional | Включает рендеринг традиционных форм (функция OpenType: trad). |
| full-width | Включает рендеринг символов одинаковой ширины, квадратной формы (функция OpenType: fwid). |
| proportional-width | Включает рендеринг символов разной ширины (функция OpenType: pwid). |
| ruby | Включает отображение глифов вариантов ruby (функция OpenType: ruby). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-east-asian: normal;
font-variant-east-asian: jis78;
font-variant-east-asian: jis83;
font-variant-east-asian: jis90;
font-variant-east-asian: jis04;
font-variant-east-asian: simplified;
font-variant-east-asian: traditional;
font-variant-east-asian: full-width;
font-variant-east-asian: proportional-width;
font-variant-east-asian: ruby;
font-variant-east-asian: ruby full-width jis83;
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
Рис. 8. Пример вывода текста с font-variant-east-asian: jis787. Общее сокращение для рендеринга шрифтов: свойство font-variant
| font-variant | |
|---|---|
| Значения: | |
| normal | Сбрасывает все подсвойства вариантов шрифтов к их начальному значению. Значение по умолчанию. |
| none | Устанавливает для font-variant-ligatures значение none и сбрасывает все остальные свойства шрифта на значение по умолчанию. |
| значения отдельных свойств вариантов шрифта | Определяет ключевые слова и функции, относящиеся к конкретному свойству. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство font-variant является сокращением для всех подсвойств вариантов шрифта. Не сбрасывает значения font-feature-settings.
Синтаксис
font-variant: normal;
font-variant: none;
font-variant: small-caps;
font-variant: common-ligatures small-caps;
font-variant: inherit;
font-variant: initial;8. Низкоуровневое управление настройками шрифтов: свойство font-feature-settings
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 34, 15 -moz-
Chrome: 48, 21 -webkit-
Safari: 9.1
Opera: 35, 15 -webkit-
iOS Safari: 9.3
UC Browser for Android: 11.8 -webkit-
Chrome for Android: 71
Samsung Internet: 5, 4 -webkit-
Свойство font-feature-settings обеспечивает низкоуровневый контроль над функциями шрифтов OpenType. Оно предназначено для предоставления доступа к функциям шрифтов, которые не используются широко, но необходимы для конкретного случая использования. Авторы обычно должны использовать font-variant и связанные с ним подсвойства, когда это возможно, и использовать это свойство только в особых случаях, когда его использование является единственным способом доступа к определенной редко используемой функции шрифта.
Свойство наследуется.
| font-feature-settings | |
|---|---|
| Значения: | |
| normal | Значение означает, что из-за этого свойства не происходит никаких изменений в выборе или позиционировании глифа. Значение по умолчанию. |
| строка и/или целое число/on/off | Строка представляет собой тег OpenType. Целое число, если присутствует, указывает индекс, используемый для выбора символа. Значение должно быть 0 или больше. Значение 0 указывает, что функция отключена. Для логических объектов значение 1 включает функцию. Для объектов, не являющихся логическими, значение 1 или больше включает объект и указывает индекс выбора объекта. Значение on является синонимом 1, а off является синонимом 0. Если значение опущено, принимается значение 1. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-feature-settings: normal;
font-feature-settings: "smcp", "swsh" 2;
font-feature-settings: "dlig" 1;
font-feature-settings: "smcp" on;
font-feature-settings: "c2sc";
font-feature-settings: "liga" off;
font-feature-settings: "tnum", "hist";
font-feature-settings: "tnum" "hist";
font-feature-settings: "PKRN";
font-feature-settings: inherit;
font-feature-settings: initial;По материалам CSS Fonts Module Level 3
CSS шрифтов
Свойства шрифта CSS определяют семейство шрифтов, жирность, размер и стиль текста.
Разница между шрифтами с засечками и без засечек
Семейство шрифтов CSS
В CSS существует два типа названий семейств шрифтов:
- родовое семейство — группа семейств шрифтов с похожий вид (например, «Serif» или «Monospace»)
- Семейство шрифтов — конкретное семейство шрифтов (например, «Times New Roman» или «Ариал»)
| Родовое семейство | Семейство шрифтов | Описание |
|---|---|---|
| Serif | Times New Roman Грузия | Шрифты с засечками имеют небольшие линии на концах некоторых символов |
| Без засечек | Arial Вердана | «Sans» означает «без» — эти шрифты не имеют строки на концах символов |
| Моноширинный | Courier New Консоль Lucida | Все моноширинные символы имеют одинаковую ширину |
Примечание: Считается, что на экранах компьютеров шрифты без засечек легче читать, чем шрифты с засечками.
Семейство шрифтов
Семейство шрифтов текста задается свойством font-family .
Свойство font-family должно содержать несколько имен шрифтов в качестве «резервной» системы. Если браузер не поддерживает первый шрифт, он пробует следующий шрифт, и поэтому на.
Начните с желаемого шрифта и закончите общим семейством, чтобы браузер выбирает аналогичный шрифт из общего семейства, если другие шрифты не доступный.
Примечание : Если название семейства шрифтов состоит из более чем одного слова, оно должно быть в кавычки, например: «Times New Roman».
В списке, разделенном запятыми, указано более одного семейства шрифтов:
Пример
Укажите шрифт для трех абзацев:
.serif {font-family: «Times New Roman», Times, serif;
}
.sansserif {
семейство шрифтов: Arial, Helvetica, sans-serif;
}
.monospace {
font-family: «Lucida Console», Courier, моноширинный;
}
Пример
Укажите шрифт «Impact» для абзаца:
п.ударные {
font-family: Impact, Charcoal, sans-serif;
}
Чтобы узнать о наиболее часто используемых комбинациях шрифтов, обратитесь к нашим веб-безопасным комбинациям шрифтов.
,
CSS Свойство: font | HTML Собака
Характеристики шрифта. Некоторые или все названия шрифта, размер шрифта, жирность, курсив, капители и высоту строки.
Сокращенное свойство, объединяющее:
font-stretch также можно включить, но, учитывая его новомодность и отсутствие поддержки, это вызывает проблемы (например, отображение свойства font , игнорируемого большинством браузеров). Лучший совет: если вы достаточно изворотливы, чтобы использовать font-stretch , используйте его отдельно.
Возможные значения
Список значений, взятых из font-family , font-size , font-weight , font-style , font-option и line-height (подробности см. На отдельных страницах свойств. возможных значений для каждой характеристики):
[стиль] [вариант] [вес] [размер] / [высота строки] [семейство]
Пример: курсив, полужирный шрифт, полужирный шрифт 12px / 1.5 Helvetica, Arial, sans-serif
Обратите внимание, что это список , разделенных пробелами, за исключением между font-size и line-height , которые разделены косой чертой /.
Части значения font-size и font-size семейства являются обязательными, но остальные необязательны. Любые исключенные значения по умолчанию будут иметь начальное значение.
наследуют , начальные или незаданные также можно использовать на их одиноких.
Ссылка на нас! Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас.
Пример
.shorthand1 {font: курсив, капители полужирный, 12 пикселей / 1.5 Helvetica, Arial, без засечек; }
/ * ... эквивалентно ... * /
.longhand1 {
стиль шрифта: курсив;
вариант шрифта: капители;
font-weight: жирный;
размер шрифта: 12 пикселей;
высота строки: 1,5;
семейство шрифтов: Helvetica, Arial, sans-serif;
}
.shorthand2 {font: bold 1.5em Times, "Times New Roman", serif; }
/ * ... эквивалентно ... * /
.longhand2 {
стиль шрифта: начальный;
вариант шрифта: начальный;
font-weight: жирный;
размер шрифта: 1.5em;
высота строки: начальная;
семейство шрифтов: Times, Times New Roman, с засечками;
}
Поддержка браузера
Поддерживается всеми современными браузерами.
,CSS свойство font-family
Пример
Укажите шрифт для двух абзацев:
p.a {font-family: «Times New Roman», Times, serif;
}
p.b {
font-family: Arial, Helvetica,
без засечек;
}
Определение и использование
Свойство font-family определяет шрифт для элемента.
Семейство шрифтов Свойство может содержать несколько имен шрифтов в качестве «резервной» системы.Если браузер не поддерживает первый шрифт, он пробует следующий шрифт.
Существует два типа названий семейств шрифтов:
- фамилия — Название семейства шрифтов, например «раз», «курьер», «ариал» и т. Д.
- generic-family — название общего-семейства, например «serif», «sans-serif», «cursive», «fantasy», «monospace».
Начинайте с желаемого шрифта и всегда заканчивайте общим семейством, чтобы браузер мог выбрать аналогичный шрифт из общего семейства, если другие шрифты недоступны.
Примечание: Разделите каждое значение запятой.
Примечание: Если имя шрифта содержит пробелы, его необходимо заключить в кавычки. При использовании атрибута style в HTML необходимо использовать одинарные кавычки.
| Значение по умолчанию: | зависит от браузера |
|---|---|
| Унаследовано: | да |
| Анимация: | нет.Прочитать о animatable |
| Версия: | CSS1 |
| Синтаксис JavaScript: | объект .style.fontFamily = «Verdana, sans-serif» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
| Объект | |||||
|---|---|---|---|---|---|
| семейство шрифтов | 1.0 | 4,0 | 1,0 | 1,0 | 3,5 |
Синтаксис CSS
семейство шрифтов: фамилия | родовое семейство | начальное | наследование;
Стоимость недвижимости
| Значение | Описание | Играй |
|---|---|---|
| фамилия родовое семейство | Приоритетный список названий семейств шрифтов и / или родовых названий семейств | Играй » |
| начальный | Устанавливает для этого свойства значение по умолчанию.Читать про начальный | Играй » |
| унаследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
Связанные страницы
УчебникCSS: Шрифт CSS
Ссылка CSS: свойство шрифта
Ссылка на HTML DOM: свойство fontFamily
,
CSS Fonts — Веб-технологии для разработчиков
CSS Fonts — это модуль CSS, который определяет свойства шрифта и способ загрузки ресурсов шрифта. Он позволяет вам определять стиль шрифта, такой как его семейство, размер и вес, высоту строки и варианты глифа, которые будут использоваться, когда для одного символа доступно несколько.
Базовый пример
В следующем примере показано простое использование основных свойств шрифта для стилизации абзаца текста.
p {
ширина: 600 пикселей;
маржа: 0 авто;
семейство шрифтов: «Helvetica Neue», «Arial», без засечек;
стиль шрифта: курсив;
font-weight: 100;
шрифт-вариант-лигатуры: нормальный;
font-size: 2rem;
межбуквенный интервал: 1px;
} Триста лет назад
Я думал, что могу немного поспать
Я растянулся на старинной кровати
«Мой дух сделал ползучие мурашки
Результат будет следующим:
Примеры вариативных шрифтов
Вы можете найти несколько примеров вариативных шрифтов на v-fonts.com и axis-praxis.org; см. также наше руководство по переменным шрифтам для получения дополнительной информации и информации об использовании.
Номер ссылки
Недвижимость
At-rules
-
@ font-face -
@ font-feature-values
Направляющие
- Основной стиль текста и шрифта
- В этой обучающей статье для новичков мы подробно рассмотрим все основные основы стилизации текста / шрифта, включая установку толщины шрифта, семейства и стиля, сокращения шрифта, выравнивания текста и других эффектов, а также межстрочного и буквенного интервала.
- Руководство по функциям шрифтов OpenType
- Функции или варианты шрифта относятся к различным глифам или стилям символов, содержащимся в шрифте OpenType. Сюда входят такие вещи, как лигатуры (специальные глифы, которые объединяют символы, такие как ‘fi’ или ‘ffl’), кернинг (корректировка интервала между определенными парами букв), дроби, числовые стили и ряд других. Все они называются функциями OpenType и доступны для использования в Интернете через определенные свойства и свойство низкоуровневого элемента управления —
font-feature-settings.В этой статье вы найдете все, что вам нужно знать об использовании функций шрифтов OpenType в CSS. - Руководство по выбору шрифтов
- Вариативные шрифты — это эволюция спецификации шрифтов OpenType, которая позволяет включать множество различных вариаций гарнитуры в один файл, вместо того, чтобы иметь отдельный файл шрифта для каждой ширины, веса или стиля. Эта статья даст вам все, что вам нужно знать, чтобы начать использовать вариативные шрифты.