Css font variant: font-variant — CSS: Cascading Style Sheets — Вебджем.рф | Создание и продвижение сайтов

Содержание

font-variant | WebReference

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

Краткая информация

Значение по умолчанию	normal
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис

font-variant: normal | small-caps

Синтаксис

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

normal: Оставляет регистр символов исходным, заданным по умолчанию.
small-caps: Модифицирует все строчные символы как заглавные уменьшенного размера, как показано на рис. 1.

Рис. 1. Обычный текст и текст в виде капители

Песочница

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

normal small-caps

div {
  font-variant: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>font-variant</title> <style> h2 { font-variant: small-caps; /* Устанавливаем капитель для заголовка */ } </style> </head> <body> <h2>Почему ослаблен амфибол?</h2> <p>Пока магма остается в камере, минерализация стягивает орогенез. </p> </body> </html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства font-variant

Объектная модель

Объект.

style.fontVariant

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

Спецификация	Статус
CSS Fonts Module Level 3	Возможная рекомендация
CSS Level 2 (Revision 1)	Рекомендация
CSS Level 1	Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.

Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


4	12	1	3.5	1	1


1	1	6	1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Текст и шрифт

font-variant-caps ⚡️ HTML и CSS с примерами кода

Свойство font-variant-caps управляет использованием альтернативных глифов для заглавных букв.

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

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

Демо

Шрифт и Цвет

@font-face

font
font-family
font-feature-settings
font-kerning
font-language-override
font-optical-sizing
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings
font-weight
line-height

color
opacity
print-color-adjust

Синтаксис

/* Keyword values */
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;
/* Global values */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: unset;

Значения

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

normal: Отключает использование альтернативных символов.
small-caps: Включает отображение строчных заглавных букв (функция OpenType: smcp). Глифы с маленькими заглавными буквами обычно используют форму прописных букв, но уменьшаются до размера строчных букв.
all-small-caps: Включает отображение прописных букв как для прописных, так и для строчных букв (возможности OpenType: c2sc, smcp).
petite-caps: Включает отображение маленьких заглавных букв (функция OpenType: pcap).
all-petite-caps: Позволяет отображать маленькие заглавные буквы как для прописных, так и для строчных букв (функции OpenType: c2pc, pcap).
unicase: Включает отображение смеси строчных прописных букв с обычными строчными буквами (функция OpenType: unic).
titling-caps: Включает отображение заглавных букв (функция OpenType: title). Глифы прописных букв часто предназначены для использования со строчными буквами. При использовании во всех последовательностях заголовков в верхнем регистре они могут казаться слишком сильными. Заглавные буквы созданы специально для этой ситуации.

Определение


Начальное значение	`normal`
Применяется ко	всем элементам, включая `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	как определено
Тип анимации	дискретный

Поддержка браузерами

Примеры

Пример 1

Пример 2

HTMLCSSРезультат

<p>Firefox rocks, small caps!</p>
<p>Firefox rocks, normal caps!</p>

. small-caps {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal {
  font-variant-caps: normal;
  font-style: italic;
}

Firefox rocks, small caps!

Firefox rocks, normal caps!

Ссылки

Свойство font-variant-caps ^{MDN (рус.)}
CSS Fonts Module Level 3

font-variant — CSS: Каскадные таблицы стилей

Свойство CSS font-variant позволяет установить все варианты шрифта для шрифта.

Вы также можете установить значения CSS Level 2 (Revision 1) для вариант шрифта (то есть обычный или прописных ), используя сокращение шрифта .

Это свойство является сокращением для следующих свойств CSS:

font-variant-alternates
вариант шрифта-заглавные буквы
вариант шрифта восточноазиатский
шрифт-вариант-эмодзи
вариант шрифта-лигатуры
вариант шрифта-числовой
вариант-шрифта-позиция

 вариант шрифта: капитель;
вариант шрифта: обычные лигатуры, маленькие заглавные буквы;
/* Глобальные значения */
вариант шрифта: наследовать;
вариант шрифта: начальный;
вариант шрифта: вернуться;
вариант шрифта: обратный слой;
вариант шрифта: не установлен;

Значения

нормальный

Определяет обычный шрифт. Каждое обычное свойство имеет начальное значение нормальное .

нет

Устанавливает значение font-variant-ligatures как none и значения других полнотекстовых свойств как normal , их начальное значение.

, , <исторические-lig-значения> ,

Задает ключевые слова, связанные со свойством font-variant-ligatures в полном виде. Возможные значения: общих лигатур , не общих лигатур , дискреционных лигатур , не дискреционных лигатур , исторических лигатур , без исторических лигатур 5 ,

`04 контекстный`

и неконтекстный .

stylistic() , исторические формы , styleset() , character-variant() , swash() , орнаменты() , аннотация()85

Указывает ключевые слова и функции, связанные со свойством font-variant-ligatures в полном виде.

с маленькими заглавными буквами , с маленькими заглавными буквами , с маленькими заглавными буквами , маленькие заглавные буквы , индивидуальная упаковка , заглавные буквы

Задает ключевые слова и функции, связанные со свойством font-variant-caps в полном виде.

<числовые-цифровые-значения> , <числовые-промежутки-значения> , <числовые-значения-дробы> , порядковый номер , косая черта-ноль

Указывает ключевые слова, относящиеся к font-variant-numeric полное свойство. Возможные значения- Linting-Nums , OldStyle-Nums , пропорциональные номы , Tabular-Nums , Diagonal-Fractions , Stacked-Fractions , Order и SLASHED-RENO , , и SLASHED-RANO , , , , и SLASHED-RANO , . .

<восточно-азиатские значения-варианта> , <восточно-азиатские-значения-ширины> , ruby

Указывает ключевые слова, относящиеся к font-variant-east-asian длинное свойство. Возможные значения- JIS78 , JIS83 , JIS90 , JIS04 , Упрощенные , традиционные , полная ширина , -width , и Ruby .

суб , супер

Указывает ключевые слова и функции, связанные со свойством font-variant-position в полном виде.

текст , эмодзи , юникод

Указывает ключевые слова и функции, связанные со свойством font-variant-emoji в полном виде.

Исходное значение	`обычный`
Применяется ко всем элементам	. Это также относится к `::first-letter` и `::first-line` .
Унаследовано	да
Вычисленное значение	как указано
Тип анимации	дискретный

2 font-variant = 7

2 | нет | [ [ <общие-lig-значения> || <дискреционные-лиг-значения> || <исторические-лиг-значения> || <контекстные-альт-значения> ] || [малые капиталы | все-маленькие заглавные | маленькие кепки | все миниатюрные кепки | уникальный | заглавные буквы ] || [ стилистический( <имя-значения-функции> ) || исторические формы || набор стилей( <имя-значения-функции># ) || символьный вариант( <имя-значения-функции># ) || swash( <имя-значения-функции> ) || украшения( <имя-значения-функции> ) || аннотация (<имя-значения-функции>)] || [ <числовые значения> || <числовые значения интервалов> || <число дробных значений> || порядковый номер || косая черта-ноль ] || [ <восточно-азиатские-варианты-значения> || <восточноазиатские значения ширины> || рубин] || [суб | супер ] || [ текст | смайлики | Юникод ] ]

"> = common-ligatures | no-common-ligatures

"> = custom-ligatures | без дискреционных лигатур

"><исторические значения лиги> = исторические лигатуры | без исторических лигатур

"><контекстные альтернативные значения> = контекстные | без контекста

"><имя-значения-функции> = <идентификатор>

"><числовые-цифровые-значения> = подкладки-номера | старые-номера-номера

"><числовые-промежутки-значения> = пропорциональные-номера | tabular-nums

"><числовые-значения дробей> = диагональных дробей | дробей с накоплением

"> = во всю ширину | пропорциональная ширина

  Установка варианта шрифта с маленькими заглавными буквами 
 HTML 
 Firefox рулит!
Firefox на высоте!
 
 CSS 
 p. нормальный {
  вариант шрифта: нормальный;
}
п.маленький {
  вариант шрифта: капитель;
}
 
 Результат 
 Спецификация
 Модуль шрифтов CSS Уровень 4 
  # font-variant-prop 
 Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.
  преобразование текста 
  текстовый комбайн, вертикальный 
  текстовая ориентация 
 Обнаружили проблему с содержанием этой страницы? 
 Отредактируйте страницу на GitHub.
 Сообщить о проблеме с содержимым.
 Посмотреть исходный код на GitHub.
 Хотите принять больше участия?
 Узнайте, как внести свой вклад.
 Последний раз эта страница была изменена  000Z"> 21 февраля 2023 г.  участниками MDN.
 font-variant-caps — CSS: каскадные таблицы стилей 
 Свойство CSS   font-variant-caps   управляет использованием альтернативных глифов для заглавных букв.
 Если заданный шрифт содержит глифы заглавных букв нескольких разных размеров, это свойство выбирает наиболее подходящие из них. Если маленькие заглавные буквы недоступны, они отображаются с помощью маленьких заглавных букв. Если их нет, браузер синтезирует их из глифов верхнего регистра.
 Шрифты иногда включают специальные глифы для различных символов без регистра (таких как знаки препинания), чтобы лучше соответствовать заглавным символам вокруг них. Однако маленькие заглавные глифы никогда не синтезируются для символов без регистра.
 Правила для конкретного языка 
 Это свойство учитывает правила отображения регистра для конкретного языка. Например: В тюркских языках, таких как турецкий (tr), азербайджанский (az), крымскотатарский (crh), поволжскотатарский (tt) и башкирский (ba), есть два вида  и  (один с точкой, один без) и две пары корпусов:  и  /  и  и  и  /  и .
 В немецком языке (de)  ß  может стать  ẞ  (U+1E9E) в верхнем регистре. В греческом языке (el) гласные теряют ударение, когда все слово написано прописными буквами ( ά / Α ), за исключением дизъюнктива eta ( ή / Ή ). Кроме того, дифтонги с ударением на первой гласной теряют ударение и получают диакритические знаки на второй гласной (9).0004 άι  /  ΑΪ  ).
 /* Значения ключевых слов */
заглавные буквы варианта шрифта: нормальный;
шрифт-вариант-заглавные буквы: маленькие заглавные буквы;
заглавные буквы шрифта: все маленькие заглавные буквы;
заглавные буквы шрифта: маленькие заглавные буквы;
заглавные буквы шрифта: все маленькие заглавные буквы;
шрифт-вариант-заглавные буквы: unicase;
заглавные буквы шрифта: заглавные буквы;
/* Глобальные значения */
заглавные буквы варианта шрифта: наследовать;
заглавные буквы варианта шрифта: начальный;
заглавные буквы варианта шрифта: вернуться;
заглавные буквы варианта шрифта: вернуть слой;
заглавные буквы варианта шрифта: не установлено;
 
  вариант шрифта-заглавные буквы  указывается с помощью одного значения ключевого слова из списка ниже. В каждом случае, если шрифт не поддерживает значение OpenType, он синтезирует глифы.
 Значения 
  нормальный 
 Деактивирует использование альтернативных глифов.
  мелкие компании 
 Включает отображение прописных букв (функция OpenType:  smcp  ). Глифы с маленькими заглавными буквами обычно используют форму прописных букв, но уменьшаются до размера строчных букв.
  только с маленькими заглавными буквами 
 Включает отображение прописных букв как в верхнем, так и в нижнем регистре (функции OpenType:  c2sc  ,  smcp  ).
  маленькие шапочки 
 Включает отображение маленьких заглавных букв (функция OpenType:  pcap  ).
  маленькие кепки 
 Включает отображение маленьких прописных букв как для прописных, так и для строчных букв (функции OpenType:  c2pc ,  pcap ).
  индивидуальный 
 Включает отображение комбинации строчных букв для прописных букв с обычными строчными буквами (функция OpenType:  unic  ).
  заглавные буквы 
 Включает отображение заглавных букв (функция OpenType:  titl  ). Глифы прописных букв часто предназначены для использования со строчными буквами. При использовании во всех последовательностях заголовков в верхнем регистре они могут показаться слишком сильными. Специально для этой ситуации разработаны заглавные буквы.
 Большие фрагменты текста, установленные с использованием варианта шрифта   со значением  all-small-caps  или  all-petite-caps , могут быть трудны для чтения людям с когнитивными проблемами, такими как дислексия.
 MDN Понимание WCAG, пояснения к Руководству 1.4
 Понимание W3C WCAG 2.1
 Исходное значение   нормальный 
 Применяется ко всем элементам . Это относится и к  :: первая буква  и  :: первая строка  .
 Inherited  yes
 Computed value  as specified
 Animation type  discrete
 font-variant-caps =  
 normal           | 
 мелкие компании | 
 только малые заглавные буквы | 
 миниатюрные кепки | 
 все-маленькие кепки | 
 уникейс | 
 заглавные буквы 
 Установка варианта шрифта с маленькими заглавными буквами 
 HTML 
 Firefox хорош, маленькие заглавные буквы!
Firefox рулит, нормальные заглавные буквы!
 
 CSS 
 .маленькие заглавные {
  шрифт-вариант-заглавные буквы: маленькие заглавные буквы;
  стиль шрифта: курсив;
}
.нормальный {
  заглавные буквы варианта шрифта: нормальный;
  стиль шрифта: курсив;
}
 
 Результат 
 Спецификация
 CSS-PROP-PROP-MODULE 4   # FONT-VAINT-CAPS-PROP-PROP-PROP  .Навигация по записям
Кем можно работать мировая экономика: Мировая экономика – кем работать
Как пишется зарегистрироваться: «Зарегистрироваться» или «зарегестрироваться»? Как писать правильно
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт 
  

  
Рубрики
Css
Html
Js
Адаптивный сайт
Верстка
Идеи
С чего начать
Советы
Шаблоны
Разное
 © Компания  Вебджем.рф  2009 - 2024 | Все права защищены.

Исходное значение	`нормальный`
Применяется ко всем элементам	. Это относится и к `:: первая буква` и `:: первая строка` .
Inherited	yes
Computed value	as specified
Animation type	discrete