logo
Helpful resources ▼
  Nuget   Pricing   Buy

CSS-Schriftarten | Aspose.Font für .NET

Dieser Artikel soll Ihnen HTML/CSS-Schriftarten und deren Eigenschaften näherbringen und anhand von Codebeispielen veranschaulichen, wie Sie mit ihnen arbeiten können. Sie lernen, wie Sie Texte fett oder halbfett darstellen, die Schriftgröße oder Schriftfamilie in CSS ändern und vieles mehr.

Sie werden auch den Unterschied zwischen CSS-Schrifteigenschaften und der allgemeinen Klassifizierung von Schrifteigenschaften kennenlernen. Diese Grundlagen werden im Artikel Was ist eine Schriftart? genauer beschrieben.

CSS-Schriftarten

Eine Schriftart in CSS ist eine Ressource, die eine visuelle Darstellung von Glyphen enthält. Zur Vereinfachung: Sie enthält Informationen, die die Glyphen ihren jeweiligen Codes zuordnen.

Schriftartressourcen können lokal auf dem Gerät eingerichtet werden, auf dem der Browser läuft. Bei solchen Schriftarten können Informationen direkt aus der Ressource bezogen werden (z. B. aus einer Datei wie Montserrat.ttf). Bei Web-Schriftarten (Webfonts) sind diese Informationen über einen Link zur Ressource der Schriftart eingebunden.

Eigenschaften der CSS-Schriftart

CSS bietet mehrere Schrifteigenschaften, um das Erscheinungsbild und Verhalten von Schriftarten auf Webseiten zu steuern. Diese können einzeln oder kombiniert verwendet werden, um die gewünschten typografischen Effekte zu erzielen. Da nicht alle Eigenschaften von allen Browsern unterstützt werden, ist es wichtig, die browserübergreifende Kompatibilität zu berücksichtigen.

Werfen wir einen Blick auf einige der am häufigsten verwendeten Eigenschaften:

CSS-Schriftfamilie (font-family)

Schriftarten mit einem gemeinsamen Design werden üblicherweise in einer Schriftfamilie zusammengefasst. Innerhalb dieser Familie können die Glyphen in Breite, Neigung oder Gewicht variieren.

Die CSS-Eigenschaft font-family wird zur Auswahl der Schriftart verwendet. Es ist ratsam, mehrere Variationen oder Alternativen anzugeben, da schwer vorherzusagen ist, ob eine bestimmte Schriftart auf dem Computer des Benutzers installiert ist. Der Browser prüft die Liste der angegebenen Schriftarten nacheinander, bis er eine verfügbare findet.

Die Eigenschaft font-family wird vererbt.

Im CSS akzeptiert font-family folgende Werte:

Anwendungsbeispiel:

Im folgenden Beispiel werden unterschiedliche Schriftfamilien definiert:

EigenschaftWert für Text 1Wert für Text 2Wert für Text 3
font-family:Lobster, Pacifico, cursive;Audiowide, fantasy;Courier, monospace;

Syntax:

 1// text 1
 2.text1 {
 3    font-family: Lobster, cursive;
 4}
 5// text 2
 6.text2 {
 7    font-family: Audiowide, fantasy;
 8}
 9// text 3
10.text3 {
11    font-family: Courier, monospace;
12}

Das Ergebnis der Anwendung sieht wie folgt aus (beachten Sie, dass Schriftgröße und Farbe für alle Texte identisch sind):

In verschiedenen CSS-Schriftfamilien gerenderter Text

CSS-Schriftstärke (font-weight)

Die Eigenschaft font-weight bestimmt die Dicke der Linien einer Schriftart.

Die Eigenschaft font-weight wird vererbt.

Im HTML/CSS kann font-weight folgende Werte annehmen:

Anwendungsbeispiel:

Rendern wir Texte mit unterschiedlichen Werten für font-weight:

EigenschaftWert für Text 1Wert für Text 2Wert für Text 3
font-weight:900;500;200;

Syntax:

 1// text 1
 2.text1 {
 3    font-weight: 900;
 4}
 5// text 2
 6.text2 {
 7    font-weight: 500;
 8}
 9// text 3
10.text3 {
11    font-weight: 200;
12}

Das Ergebnis (bei gleicher Farbe und Größe). Wichtig ist, dass die verwendete Schriftart selbst über die entsprechenden Strichstärken verfügen muss. Viele Schriftarten bieten nur normal und bold. Die im Beispiel verwendete Segoe UI bietet jedoch genügend Variationen.

In verschiedenen Schriftstärken gerenderter Text

CSS-Schriftdehnung (font-stretch)

Die Eigenschaft font-stretch erlaubt es, eine normale, schmale (condensed) oder breite (expanded) Version aus einer Schriftfamilie zu wählen. Dies funktioniert nur bei Schriftarten, die speziell mit solchen Breitenvarianten entworfen wurden.

Die Eigenschaft font-stretch wird vererbt.

Mögliche Werte für font-stretch:

Anwendungsbeispiel:

EigenschaftWert für Text 1Wert für Text 2Wert für Text 3
font-stretch:condensed;normal;expanded;

Syntax:

 1// text 1
 2.text1 {
 3    font-stretch: condensed;
 4}
 5// text 2
 6.text2 {
 7    font-stretch: normal;
 8}
 9// text 3
10.text3 {
11    font-stretch: expanded;
12}

Das Ergebnis sieht wie folgt aus:

In verschiedenen Schriftdehnungen gerenderter Text

CSS-Schriftstil (font-style)

Diese Eigenschaft steuert die Neigung der Schriftart.

Die Eigenschaft font-style wird vererbt.

Mögliche Werte für font-style:

Anwendungsbeispiel:

EigenschaftWert für Text 1Wert für Text 2Wert für Text 3
font-style:normal;italic;oblique;

Syntax:

 1// text 1
 2.text1 {
 3    font-style: normal;
 4}
 5// text 2
 6.text2 {
 7    font-style: italic;
 8}
 9// text 3
10.text3 {
11    font-style: oblique;
12}

Ergebnis:

In verschiedenen Schriftstilen gerenderter Text

Oft sehen italic und oblique identisch aus, wenn die Schriftart keinen speziellen schrägen (oblique) Schnitt besitzt; der Browser simuliert die Neigung dann meist identisch.

CSS-Schriftgröße (font-size)

Diese Eigenschaft bestimmt die Höhe der Glyphen einer Schriftart.

Die Eigenschaft font-size wird vererbt.

Moögliche Werte für font-size:

Anwendungsbeispiel:

EigenschaftWert für Text 1Wert für Text 2Wert für Text 3
font-size:7vw;70px;2em;

Syntax:

 1// text 1
 2.text1 {
 3    font-size: 7vw;
 4}
 5// text 2
 6.text2 {
 7    font-size: 70px;
 8}
 9// text 3
10.text3 {
11    font-size: 2em;
12}

Ergebnis:

In verschiedenen Schriftgrößen gerenderter Text

Zusammenfassende Schriftart-Eigenschaft (font)

Die Eigenschaft font dient als Kurzschreibweise, um mehrere Schrifteigenschaften in einer Zeile zu definieren. Folgende Werte können angegeben werden: font-style, font-variant, font-weight, font-stretch, font-size/line-height und font-family. Auch small-caps (Kapitälchen) kann hier enthalten sein. Mehr dazu finden Sie im Abschnitt Schriftartvariante im Artikel Was ist eine Schriftart?.

Anwendungsbeispiel:

EigenschaftWert für Text 1Wert für Text 2Wert für Text 3
font:6vw Arial;60pt Courier, monospace;-

Syntax:

 1// text 1
 2.text1 {
 3    font: 6vw Arial;
 4}
 5// text 2
 6.text2 {
 7    font: 60pt Courier, monospace;
 8}
 9// text 3
10.text3 {
11}

Da für den dritten Text keine Werte definiert wurden, wird er in den Standardeinstellungen gerendert.

Mit der Kurzschreibweise font gerenderter Text

CSS-Schriftsynthese (font-synthesis)

Diese Eigenschaft legt fest, ob der Browser fehlende Schnitte (wie fett oder schräg) künstlich erzeugen darf. Wenn ein Schnitt nicht in der Schriftdatei enthalten ist, simuliert der Browser diesen standardmäßig, sofern dies nicht explizit untersagt wird.

Die Eigenschaft font-synthesis wird vererbt.

Mögliche Werte:

Anwendungsbeispiel:

EigenschaftWert für Text 1Wert für Text 2Wert für Text 3
font-synthesis:weight;style;none;
font-weight:900;-900;
font-style:-oblique;oblique;

Syntax:

 1// text 1
 2.text1 {
 3    font-synthesis: weight;
 4    font-weight: 900;
 5}
 6// text 2
 7.text2 {
 8    font-synthesis: style;
 9    font-style: oblique;
10}
11// text 3
12.text3 {
13    font-synthesis: none;
14    font-weight: 900;
15    font-style: oblique;
16}

Da der dritte Text none verwendet, hat der Browser den gewünschten Fett- und Schrägstil nicht simuliert.

In verschiedenen Schriftsynthese-Werten gerenderter Text

Schriftartenstapel (Font Stacks)

Schriftartenstapel (Font Stacks) bezeichnen eine Liste von Schriftarten im CSS, die als Ausweichoptionen (Fallbacks) dienen. Falls eine bestimmte Schriftart auf dem System des Benutzers nicht vorhanden ist, wird die nächste aus der Liste verwendet. Dies stellt eine konsistente Darstellung über verschiedene Plattformen hinweg sicher.

Häufig wird eine Liste nach Priorität definiert. Ist die erste Wahl nicht verfügbar, versucht der Browser die nächste, bis er auf eine installierte Schrift trifft.

Beispiel: Die bevorzugte Schriftart ist “Helvetica Neue”. Ist sie nicht verfügbar, wird “Arial” versucht. Schlägt auch das fehl, wird eine generische serifenlose Schrift (sans-serif) verwendet.

1    font-family: "Helvetica Neue", Arial, sans-serif;

Es gilt als Best Practice, immer eine generische Familie (serif, sans-serif oder monospace) als letzte Option anzugeben.

Websichere Schriftarten

Websichere Schriftarten (Web-safe fonts), auch Systemschriftarten genannt, sind eine Sammlung von Fonts, die auf fast allen Betriebssystemen vorinstalliert sind. Sie gelten als sicher für das Webdesign, da sie eine hohe Verfügbarkeit garantieren.

In den Anfängen des Webs gab es nur wenige Möglichkeiten, weshalb man sich auf einen Kernsatz installierter Schriften verließ.

Beispiele für websichere Schriftarten:

Mit modernen Webtechnologien und Diensten wie Google Fonts hat die Bedeutung websicherer Schriften abgenommen, da nun fast jede beliebige Schriftart eingebunden werden kann. Dennoch bleiben sie als verlässliche Fallbacks wichtig.

Wie verwende ich externe Schriftarten in CSS?

Um externe Schriftarten einzubinden, nutzt man die @font-face-Regel. Hiermit können Sie eigene Schriftarten für Ihre Webseite bereitstellen:

  1. Schriftdateien beschaffen:

    • Suchen Sie Dateien in Formaten wie WOFF, WOFF2, TTF oder EOT.
    • Google Fonts ist eine beliebte Quelle hierfür.

  2. Dateien hochladen:

    • Laden Sie die Dateien auf Ihren Server oder in Ihr Projektverzeichnis hoch.

  3. @font-face definieren:

    • Geben Sie in Ihrem CSS den Namen der Schriftfamilie und den Pfad zu den Dateien an.

Beispiel:

1    @font-face {
2        font-family: 'MeineEigeneSchrift';
3        src: url('pfad/meine-schrift.woff2') format('woff2'),
4             url('pfad/meine-schrift.woff') format('woff');
5        /* Weitere Formate für maximale Kompatibilität */
6    }
  1. Schriftart anwenden:
    • Nutzen Sie nun den definierten Namen in Ihrer font-family-Eigenschaft.
1    body {
2        font-family: 'MeineEigeneSchrift', sans-serif;
3    }
  1. Testen Sie die Darstellung in verschiedenen Browsern.

Ein paar Worte zur responsiven Typografie

Responsive Typografie bedeutet, Texte so zu gestalten, dass sie auf unterschiedlichen Bildschirmgrößen optimal lesbar bleiben. Dies umfasst die Anpassung von Größe, Zeilenlänge und Abständen.

Wichtige Aspekte:

Fazit

CSS-Schrifteigenschaften sind grundlegende Bausteine im Webdesign. Da der Großteil von Webseiten aus Text besteht, ist das Verständnis dieser Eigenschaften entscheidend für Qualität, Lesbarkeit und Skalierbarkeit.

Während einige Eigenschaften universell funktionieren, erfordern andere spezielle Schriftarten, die entsprechende Variationen unterstützen (z. B. bietet Inconsolata acht verschiedene Stärken).

Sollten Sie eine bestimmte Schriftart suchen, können Sie diese über die kostenlosen Web-Apps von Aspose finden und herunterladen. Zudem bietet der Font Viewer alle technischen Details, die Sie für Ihre Entwicklung benötigen könnten.

Was ist eine Glyphe? Schriftformate

Have any questions about Aspose.Font?



Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

© Aspose Pty Ltd 2001-2026. All Rights Reserved.