font-variant

CSS font-variant-caps Property

In CSS1 and CSS2, it was the font-variant property that specified small caps. But in CSS3, this property has become shorthand for CSS3 properties like font-variant-caps property. This property allows to select alternate glyphs for small, petite capitals and titling including many useful values like:

• normal
• small-caps
• all-small-caps
• petite-caps
• all-petite-caps
• unicase
• titling-caps

When a given font involves capital letter glyphs that are of different size, the font-variant-caps property selects the most suitable ones. If small capital glyphs are not available they are rendered using uppercase glyphs.

The font-variant-caps property takes into account language-specific case mapping rules (e.g. in german (de), the ß may become ẞ (U+1E9E) in uppercase).

Initial Value	normal
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.fontVariantCaps = «petite-caps»;

Syntax

font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;

Example of the font-variant-caps property:

html> html> head> title>The title of the document title> style> .all-small-caps < font-variant-caps: all-small-caps; font-style: italic; > .small-caps < font-variant-caps: small-caps; font-style: italic; > .normal < font-variant-caps: normal; font-style: italic; > style> head> body> h2>Font-variant-caps property example h2> p class="all-small-caps"> The font-variant-caps CSS property controls the use of alternate glyphs for capital letters. p> p class="small-caps">Small caps! p> p class="normal">Normal caps! p> body> html>

Result

Values

Value	Description
normal	The use of alternate glyphs is not activated.
small-caps	Allows to display small capitals. Small-caps glyphs use the form of uppercase letters, but are reduced to the size of lowercase letters.
all-small-caps	Allows to display small capitals for upper and lowercase letters.
petite-caps	Allows to display petite capitals.
all-petite-caps	Allows to display petite capitals for upper and lowercase letters.
unicase	Allows to display mixture of small capitals for uppercase letters with normal lowercase letters.
titling-caps	Allows to display titling capitals.
initial	It makes the property use its default value.
inherit	It inherits the property from its parents element.

Browser support

Источник

font-variant

The font-variant CSS shorthand property allows you to set all the font variants for a font.

You can also set the CSS Level 2 (Revision 1) values of font-variant , (that is, normal or small-caps ), by using the font shorthand.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

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; 

Values

Specifies a normal font face. Each longhand property has an initial value of normal .

Sets the value of the font-variant-ligatures as none and the values of the other longhand properties as normal , their initial value.

Specifies the keywords related to the font-variant-ligatures longhand property. The possible values are common-ligatures , no-common-ligatures , discretionary-ligatures , no-discretionary-ligatures , historical-ligatures , no-historical-ligatures , contextual , and no-contextual .

stylistic() , historical-forms , styleset() , character-variant() , swash() , ornaments() , annotation()

Specifies the keywords and functions related to the font-variant-ligatures longhand property.

small-caps , all-small-caps , petite-caps , all-petite-caps , unicase , titling-caps

Specifies the keywords and functions related to the font-variant-caps longhand property.

Specifies the keywords related to the font-variant-numeric longhand property. The possible values are lining-nums , oldstyle-nums , proportional-nums , tabular-nums , diagonal-fractions , stacked-fractions , ordinal , and slashed-zero .

Specifies the keywords related to the font-variant-east-asian longhand property. The possible values are jis78 , jis83 , jis90 , jis04 , simplified , traditional , full-width , proportional-width , and ruby .

Specifies the keywords and functions related to the font-variant-position longhand property.

Specifies the keywords and functions related to the font-variant-emoji longhand property.

Formal definition

Formal syntax

font-variant =
normal |
none |
[ [ || || || ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic( ) || historical-forms || styleset( # ) || character-variant( # ) || swash( ) || ornaments( ) || annotation( ) ] || [ || || || ordinal || slashed-zero ] || [ || || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]

=
common-ligatures |
no-common-ligatures

=
discretionary-ligatures |
no-discretionary-ligatures

=
historical-ligatures |
no-historical-ligatures

=
contextual |
no-contextual

=

=
lining-nums |
oldstyle-nums

=
proportional-nums |
tabular-nums

=
diagonal-fractions |
stacked-fractions

=
jis78 |
jis83 |
jis90 |
jis04 |
simplified |
traditional

=
full-width |
proportional-width

Examples

Setting the small-caps font variant

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; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

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

Источник

font-variant-caps

The font-variant-caps CSS property controls the use of alternate glyphs for capital letters.

Try it

When a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones. If petite capital glyphs are not available, they are rendered using small capital glyphs. If these are not present, the browser synthesizes them from the uppercase glyphs.

Fonts sometimes include special glyphs for various caseless characters (such as punctuation marks) to better match the capitalized characters around them. However, small capital glyphs are never synthesized for caseless characters.

Language-specific rules

This property accounts for language-specific case mapping rules. For example:

• In Turkic languages, such as Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of i (one with the dot, one without) and two case pairings: i / İ and ı / I .
• In German (de), the ß may become ẞ (U+1E9E) in uppercase.
• In Greek (el), vowels lose their accent when the whole word is in uppercase ( ά / Α ), except for the disjunctive eta ( ή / Ή ). Also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel ( άι / ΑΪ ).

Syntax

/* 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: revert; font-variant-caps: revert-layer; font-variant-caps: unset; 

The font-variant-caps property is specified using a single keyword value from the list below. In each case, if the font doesn’t support the OpenType value, then it synthesizes the glyphs.

Values

Deactivates of the use of alternate glyphs.

Enables display of small capitals (OpenType feature: smcp ). Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.

Enables display of small capitals for both upper and lowercase letters (OpenType features: c2sc , smcp ).

Enables display of petite capitals (OpenType feature: pcap ).

Enables display of petite capitals for both upper and lowercase letters (OpenType features: c2pc , pcap ).

Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: unic ).

Enables display of titling capitals (OpenType feature: titl ). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong. Titling capitals are designed specifically for this situation.

Accessibility concerns

Large sections of text set with a font-variant value of all-small-caps or all-petite-caps may be difficult for people with cognitive concerns such as Dyslexia to read.

Formal definition

Formal syntax

font-variant-caps =
normal |
small-caps |
all-small-caps |
petite-caps |
all-petite-caps |
unicase |
titling-caps

Examples

Setting the small-caps font variant

HTML

p class="small-caps">Firefox rocks, small caps!p> p class="normal">Firefox rocks, normal caps!p> 

CSS

.small-caps  font-variant-caps: small-caps; font-style: italic; > .normal  font-variant-caps: normal; font-style: italic; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

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

Источник

font-variant

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

Синтаксис

font-variant: normal | small-caps | inherit

Значения

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Duis te feugifacilisi
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

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

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

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

[window.]document.getElementById(» elementID «).style.fontVariant

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник

CSS font-variant-caps Property

The font-variant-caps property controls the usage of alternate glyphs for capital letters.

Default value:	normal
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.fontVariantCaps=»small-caps»

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
normal	Deactivates the use of alternate glyphs	Demo ❯
small-caps	Displays small capitals	Demo ❯
all-small-caps	Displays small capitals for both upper and lowercase letters	Demo ❯
petite-caps	Displays petite capitals	Demo ❯
all-petite-caps	Displays petite capitals for both upper and lowercase letters	Demo ❯
unicase	Displays a mix of small capitals for uppercase letters with normal lowercase letters	Demo ❯
titling-caps	Displays titling capitals	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit
unset

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник