font-variant

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die CSS-Eigenschaft font-variant Shorthand-Eigenschaft ermöglicht es, alle Schriftvarianten für eine Schriftart festzulegen.

Sie können auch die <font-variant-css2> Werte von font-variant, die in CSS Level 2.1 definiert sind (das heißt, normal oder small-caps), mithilfe der font Shorthand-Eigenschaft festlegen.

Probieren Sie es aus

Zusätzliche Eigenschaften

Syntax

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;

Werte

normal

Gibt eine normale Schriftart an. Jede Langform-Eigenschaft hat einen Anfangswert von normal.

none

Setzt den Wert der font-variant-ligatures auf none und die Werte der anderen Langform-Eigenschaften auf normal, ihren Anfangswert.

<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>

Gibt die Schlüsselwörter im Zusammenhang mit der Langform-Eigenschaft font-variant-ligatures an. Die möglichen Werte sind common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, und no-contextual.

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

Gibt die Schlüsselwörter und Funktionen im Zusammenhang mit der Langform-Eigenschaft font-variant-ligatures an.

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

Gibt die Schlüsselwörter und Funktionen im Zusammenhang mit der font-variant-caps Langform-Eigenschaft an. Der small-caps Wert ist der einzige nicht-normal Schriftvariantenwert, der innerhalb der font Shorthand-Eigenschaft gültig ist.

<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero

Gibt die Schlüsselwörter im Zusammenhang mit der font-variant-numeric Langform-Eigenschaft an. Die möglichen Werte sind lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, und slashed-zero.

<east-asian-variant-values>, <east-asian-width-values>, ruby

Gibt die Schlüsselwörter im Zusammenhang mit der font-variant-east-asian Langform-Eigenschaft an. Die möglichen Werte sind jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, und ruby.

sub, super

Gibt die Schlüsselwörter und Funktionen im Zusammenhang mit der font-variant-position Langform-Eigenschaft an.

text, emoji, unicode

Gibt die Schlüsselwörter und Funktionen im Zusammenhang mit der font-variant-emoji Langform-Eigenschaft an.

Formale Definition

Anfangswertnormal
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

Beispiele

Festlegen der Schriftvariante small-caps

HTML

html
<p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>

CSS

css
p.normal {
  font-variant: normal;
}
p.small {
  font-variant: small-caps;
}

Resultat

Spezifikationen

Specification
CSS Fonts Module Level 4
# font-variant-prop
Scalable Vector Graphics (SVG) 2
# FontVariantProperty

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-variant
CSS Fonts Module Level 3 shorthand
Greek accented characters
historical-forms
none
normal
sub
super
iİ and ıI
ßSS

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch