Die Eigenschaft font-variant-settings ermöglicht Benutzern eine gute Kontrolle auf niedriger Ebene über die Schriftarten mit variablen Eigenschaften. Benutzer können den Namen der Schriftbuchstabenachse des Zeichens angeben, dessen Wert geändert werden soll.

Es gibt zwei Formen, um diese Eigenschaft anzugeben, von denen eine normal und die zweite Zeichenfolgennummer ist. Wenn die normale Eigenschaft angewendet wird, wird der Text gemäß den Standardeinstellungen angeordnet. Diese Eigenschaft ist ein Mechanismus auf niedriger Ebene, der so konzipiert ist, dass Benutzer Funktionen für variable Schriftarten festlegen können.

Syntax: Die Syntax für die Eigenschaft font-variation-settings ist unten dargestellt.

font-variant-settings: normal | small-caps | initial | inherit;

Eigenschaftswerte:

  • Default_Value:   Um die Standardeinstellungen zu verwenden, ist der verwendete Wert „normal“.
  • Global_Values: Die globalen Werte sind definiert als „inherit“, „initial“, „revert“ und „unset“.

Beispiel 1: Unten ist das Beispiel für Font-Varianten-Einstellungen mit dem Wert „normal“.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css">
        p.normal {
            color: green;
            padding: 7px;
            font-weight: bold;
            font-variant: normal;
        }
    </style>
</head>
  
<body>
    <p class="normal">
        Hello, this is GeeksforGeeks!!
    </p>
</body>
  
</html>

Ausgabe:

Beispiel 2: Unten sehen Sie ein Beispiel für Font-Variant-Settings mit dem Wert „Small-Caps“.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css">
        p.small {
            color: green;
            padding: 12px;
            font-weight: bold;
            font-variant: small-caps;
        }
    </style>
</head>
  
<body>
    <p class="small">
        Hello, this is GeeksforGeeks!!
    </p>
</body>
  
</html>

Ausgabe:

Small-Caps

Unterstützte Browser:

  • Chrom
  • Feuerfuchs
  • Oper
  • Safari
  • Kante
  • Internet Explorer