CSS font-variant

<!doctype html>
<title>Example</title>
<style>
  p {
    font-size: 8vw;
  }
  .sc {
    font-variant: small-caps;
    }
</style>
<p class="sc">Small Caps</p> 
<p>Normal Text</p>

The font-variant property is a shorthand property for a set of properties that provide control over stylistic font features.

In CSS1 and CSS2, the font-variant property's sole purpose was to set text to small caps. In CSS3, while it still allows you to specify small caps, it has been expanded to be a shorthand property for the following new font variant subproperties:

So in CSS3 the font-variant property allows you to specify which font features to enable on a font and how they should work. Most modern font technologies support a variety of font features which change the way the font looks in certain cases. For example you can do things like, enable fancy stylistic capital letters (swash caps), have slashes through your zeros, choose between ranging (full-height) and non-ranging (old-style, or lower-case) digits, control of glyph substitution and sizing in East Asian text, and more.

Not all font features will necessarily be available to you all the time. Some font features are applicable only to certain language scripts or specific languages, or in certain writing modes. The font-variant property allows you to enable and/or control specific features as required.

Syntax

CSS2 syntax:

CSS3 syntax:

Possible Values

CSS3 supports font features that are included in the major font formats such as OpenType and Apple Advanced Typography (AAT).

Below are the values defined in CSS3 (including the OpenType feature tag/s where applicable).

normal

Resets all subproperties to their initial value.

none

Sets font-variant-ligatures to none and resets all other font feature properties to their initial value.

Ligatures

These are the possible values for the font-variant-ligatures property. They are grouped under common ligatures, discretionary ligatures, historical ligatures, and contextual alternates.

common-lig-values

Specifies whether common ligatures (OpenType features: liga, clig) are enabled or not. This can be one of the following values:

common-ligatures: Enables display of common ligatures. For OpenType fonts, common ligatures are enabled by default.
no-common-ligatures: Disables display of common ligatures.

discretionary-lig-values

Specifies whether discretionary ligatures (OpenType feature: dlig) are enabled or not. This can be one of the following values:

discretionary-ligatures: Enables display of discretionary ligatures. Which ligatures are discretionary or optional is decided by the type designer, so authors will need to refer to the documentation of a given font to understand which ligatures are considered discretionary.
no-discretionary-ligatures: Disables display of discretionary ligatures.

historical-lig-values

Specifies whether historical ligatures (OpenType feature: hlig) are enabled or not. This can be one of the following values:

historical-ligatures: Enables display of historical ligatures.
no-historical-ligatures: Disables display of historical ligatures.

contextual-alt-values

Specifies whether contextual alternates are enabled or not (OpenType feature: hlig). This can be one of the following values:

contextual: Enables display of contextual alternates.
no-contextual: Disables display of contextual alternates.

Alternates

These are the possible values for the font-variant-alternates property.

stylistic(feature-value-name): Enables display of stylistic alternates (font specific, OpenType feature: salt feature-index).
historical-forms: Enables display of historical forms (OpenType feature: hist).
styleset(feature-value-name #): Enables display with stylistic sets (font specific, OpenType feature: ssfeature-index). For example, ss01, ss02, ss03, etc
character-variant(feature-value-name #): Enables display of specific character variants (font specific, OpenType feature: cvfeature-index). For example, cv01, cv02, cv03, etc
swash(feature-value-name): Enables display of swash glyphs (font specific, OpenType feature: swsh feature-index, cswh feature-index).
ornaments(feature-value-name): Enables replacement of default glyphs with ornaments, if provided in the font (font specific, OpenType feature: ornm feature-index).
annotation(feature-value-name): Enables display of alternate annotation forms (font specific, OpenType feature: nalt feature-index).

Caps

These are the possible values for the font-variant-caps property.

small-caps

Specifies that the font is rendered in small-caps (OpenType feature: smcp). Small caps typically appear as uppercase letters but in the size of lower case letters.

all-small-caps

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

With normal small caps, any uppercase character is rendered at full uppercase size, while lowercase characters are rendered smaller. However, when the all-small-caps keyword is used, those uppercase characters are rendered at the smaller size.

petite-caps

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

If the font doesn't support petite capitals, the property behaves as though small-caps had been specified instead.

all-petite-caps

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

If this keyword is used on a font that doesn't support this feature, the property behaves as though all-small-caps had been specified instead.

unicase

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

titling-caps

Enables display of titling capitals (OpenType feature: titl).

Titling capitals are a variant of uppercase designed for heading and titles. The stroke width is reduced for use at larger point sizes where the stroke weight used in smaller text sizes would be too heavy.

If this is used on a font that doesn't support this feature, the property has no visible effect.

Numeric

These are the possible values for the font-variant-numeric property.

numeric-figure-values

This can be one of the following values:

lining-nums: Enables display of lining numerals (OpenType feature: lnum).
oldstyle-nums: Enables display of old-style numerals (OpenType feature: onum).

numeric-spacing-values

This can be one of the following values:

proportional-nums: Enables display of proportional numerals (OpenType feature: pnum).
tabular-nums: Enables display of tabular numerals (OpenType feature: tnum).

numeric-fraction-values

This can be one of the following values:

diagonal-fractions: Enables display of lining diagonal fractions (OpenType feature: frac).
stacked-fractions: Enables display of lining stacked fractions (OpenType feature: afrc).

ordinal

Enables display of letter forms used with ordinal numbers (OpenType feature: ordn).

slashed-zero

Enables display of slashed zeros (OpenType feature: zero).

East Asian

These are the possible values for the font-variant-east-asian property.

east-asian-variant-values

This can be one of the following values:

normal: None of the features listed below are enabled.
jis78: Enables rendering of JIS78 forms (OpenType feature: jp78).
jis83: Enables rendering of JIS83 forms (OpenType feature: jis83).
jis90: Enables rendering of JIS90 forms (OpenType feature: jis90).
jis04: Enables rendering of JIS04 forms (OpenType feature: jis04).
simplified: Enables rendering of simplified forms (OpenType feature: smpl).
traditional: Enables rendering of traditional forms (OpenType feature: trad).

east-asian-width-values

This can be one of the following values:

full-width: Enables rendering of full-width variants (OpenType feature: fwid).
proportional-width: Enables rendering of proportionally-spaced variants (OpenType feature: pwid).

ruby

Enables display of ruby variant glyphs (OpenType feature: ruby).

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Web.QHMIT.com

CSS font-variant

Syntax

Possible Values

Ligatures

Alternates

Caps

Numeric

East Asian

General Information

Example Code

Official Specifications