Savetheinternet.png

Die EU-Urheberrechtsreform wird das Internet, wie wir es kennen, grundlegend verändern – wenn sie denn in der finalen Abstimmung angenommen wird. Das können wir aber immer noch verhindern!

Weitere Informationen: https://juliareda.eu/2019/02/artikel-13-endgueltig/

CSS/Eigenschaften/Schriftformatierung/font-variant

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft font-variant stehen als besondere Schriftvariante Kapitälchen (kleine Großbuchstaben) statt der kleinen Buchstaben zur Verfügung.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0

Folgende Angaben sind möglich:

  • normal, normale Schriftvariante, Voreinstellung
  • small-caps, Kapitälchen
  • inherit, Schriftvariante des Elternelements
Beispiel ansehen …
      p { font-size: 16px; }
      h1, span, cite { font-variant: small-caps; }
      blockquote { width: 30em; }
      blockquote p { font: 20px Georgia, Times, sans-serif; }
      cite { display: block; text-align: right; }
Überschrift, span-Element und die Quellenangabe innerhalb des cite-Elements werden in Kapitälchen angezeigt.
Beachten Sie: Eine für ein Element festgelegte Schriftvariante wird ohne Ihr Zutun an die Kindelemente vererbt.

Variable Fonts[Bearbeiten]

Viele CSS-Einstellungen bleiben wirkungslos, da die verwendeten Schriftarten nicht genügend Schriftschnitte beinhalten. Deshalb werden zur Zeit variable Fonts entwickelt, die sich flexibel in alle möglichen Richtungen anpassen lassen. So muss zukünftig nur noch ein Font geladen werden, den Sie dann mit CSS beliebig gestalten können.

  • Chrome 5959
  • Firefox 5353
  • Leer --
  • Opera --
  • Safari --

font-variant[Bearbeiten]

Mit dem CSS Fonts Module Level 4 wird font-variant zur zusammenfassenden Eigenschaft für

  • font-variant-ligatures,
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-alternates.
  • font-variant-numeric
  • font-variant-position.

Sowie die Eigenschaften font-feature-settings und font-variation-settings. Mit diesen Eigenschaften können Sie Open Type Schriften beliebig in Form und Größe gestalten.


Beispiel: Angabe des Schriftgewichts
h2 {
  font-feature-settings: "smcp" on;
  font-variation-settings: "wght" 200;
}
Die Überschrift wird in Kapitälchen mit einem Schriftgewicht von 200, also eher schmal, angezeigt.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]


Deutsch: