font-variant
Базовая линия Широко доступна
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.
Свойство font-variant CSS позволяет задать все варианты шрифта для шрифта.
Вы также можете установить значения <font-variant-css2> font-variant, определённые в CSS Level 2.1, (то есть normal или small-caps), используя сокращённое свойство font.
Попробуйте
Составляющие свойства
Это сокращённое свойство для следующих свойств CSS:
Синтаксис
font-variant: small-caps; font-variant: common-ligatures small-caps; /* Global values */ font-variant: inherit; font-variant: initial; font-variant: revert; font-variant: revert-layer; font-variant: unset;
Значения
normal-
Указывает нормальный тип шрифта. Каждое отдельное свойство имеет начальное значение
normal. none-
Устанавливает значение
font-variant-ligaturesкакnoneи значения других отдельных свойств какnormal, т.е. их начальные значения. -
<common-lig-values>,<discretionary-lig-values>,<historical-lig-values>,<contextual-alt-values> -
Указывает ключевые слова, относящиеся к отдельному свойству
font-variant-ligatures. Возможные значения:common-ligatures,no-common-ligatures,discretionary-ligatures,no-discretionary-ligatures,historical-ligatures,no-historical-ligatures,contextual, иno-contextual. -
stylistic(),historical-forms,styleset(),character-variant(),swash(),ornaments(),annotation() -
Указывает ключевые слова и функции, относящиеся к отдельному свойству
font-variant-ligatures. -
small-caps,all-small-caps,petite-caps,all-petite-caps,unicase,titling-caps -
Указывает ключевые слова и функции, относящиеся к отдельному свойству
font-variant-caps. Значениеsmall-caps— единственный вариант шрифта, не являющийсяnormal, допустимый в сокращённом свойствеfont. -
<numeric-figure-values>,<numeric-spacing-values>,<numeric-fraction-values>,ordinal,slashed-zero -
Указывает ключевые слова, относящиеся к отдельному свойству
font-variant-numeric. Возможные значения:lining-nums,oldstyle-nums,proportional-nums,tabular-nums,diagonal-fractions,stacked-fractions,ordinal, иslashed-zero. -
<east-asian-variant-values>,<east-asian-width-values>,ruby -
Указывает ключевые слова, относящиеся к отдельному свойству
font-variant-east-asian. Возможные значения:jis78,jis83,jis90,jis04,simplified,traditional,full-width,proportional-width, иruby. -
sub,super -
Указывает ключевые слова и функции, относящиеся к отдельному свойству
font-variant-position. -
text,emoji,unicode -
Указывает ключевые слова и функции, относящиеся к отдельному свойству
font-variant-emoji.
Формальное определение
| Начальное значение | normal |
|---|---|
| Применяется к | все элементы и текст. Также применяется к ::first-letter и ::first-line. |
| Наследуется | да |
| Вычисленное значение | как указано |
| Тип анимации | дискретный |
Формальный синтаксис
font-variant =
normal |
none |
[ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]
<common-lig-values> =
common-ligatures |
no-common-ligatures
<discretionary-lig-values> =
discretionary-ligatures |
no-discretionary-ligatures
<historical-lig-values> =
historical-ligatures |
no-historical-ligatures
<contextual-alt-values> =
contextual |
no-contextual
<feature-value-name> =
<ident>
<numeric-figure-values> =
lining-nums |
oldstyle-nums
<numeric-spacing-values> =
proportional-nums |
tabular-nums
<numeric-fraction-values> =
diagonal-fractions |
stacked-fractions
<east-asian-variant-values> =
jis78 |
jis83 |
jis90 |
jis04 |
simplified |
traditional
<east-asian-width-values> =
full-width |
proportional-width
Примеры
Установка варианта шрифта small-caps
HTML
<p class="normal">Firefox rocks!</p> <p class="small">Firefox rocks!</p>
CSS
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
Результат
Спецификации
| Спецификация |
|---|
| CSS Fonts Module Level 4 # font-variant-prop |
Совместимость с браузерами
| Настольные компьютеры | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
font-variant |
1 | 12 | 1 | 3.5 | 1 | 18 | 4 | 11 | 1 | 1.0 | 4.4 |
css_fonts_shorthand |
52 | 79 | 34 | 39 | 9.1 | 52 | 34 | 41 | 9.3 | 6.0 | 52 |
greek_accented_characters |
НетВ некоторых операционных системах могут быть пропущены ударения в греческом тексте с прописными буквами. |
НетВ некоторых операционных системах могут быть пропущены ударения в греческом тексте с прописными буквами. |
НетВ некоторых операционных системах могут быть пропущены ударения в греческом тексте с прописными буквами. |
НетВ некоторых операционных системах могут быть пропущены ударения в греческом тексте с прописными буквами. |
Нет | НетВ некоторых операционных системах могут быть пропущены ударения в греческом тексте с прописными буквами. |
НетВ некоторых операционных системах могут быть пропущены ударения в греческом тексте с прописными буквами. |
НетВ некоторых операционных системах могут быть пропущены ударения в греческом тексте с прописными буквами. |
Нет | НетВ некоторых операционных системах могут быть пропущены ударения в греческом тексте с прописными буквами. |
НетВ некоторых операционных системах могут быть пропущены ударения в греческом тексте с прописными буквами. |
historical-forms |
111 | 111 | 34 | 97 | 9.1 | 111 | 34 | 75 | 9.3 | 22.0 | 111 |
none |
≤83 | 83 | ≤72 | 69 | ≤13.1 | 83 | 79 | 59 | ≤13.4 | 13.0 | 83 |
normal |
1 | 12 | 1 | 15 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
sub |
110 | 110 | 34 | 96 | 9.1 | 110 | 34 | 74 | 9.3 | 21.0 | 110 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant