CSS Schrift
CSS-Schrifteigenschaften definieren Schriftart, Schriftstärke, Größe und Textstil.
Der Unterschied zwischen Serif- und Sans-Serif-Schriften
Auf Computerbildschirmen gelten Sans-Serif-Schriften als leichter lesbar als Serif-Schriften.
CSS-Schrift
In CSS gibt es zwei Arten von Schriftfamiliennamen:
- Generische Schriftfamilien– Eine Gruppe von Schriftfamilien mit ähnlichem Aussehen (wie "Serif" oder "Monospace")
- Spezifische Schriftfamilien– Eine bestimmte Schriftfamilie (wie "Times" oder "Courier")
| Generische Familie | Schriftfamilie | Beschreibung |
|---|---|---|
| Serif | Times New Roman Georgia |
In Serifenschriften haben Zeichen zusätzliche Verzierungen an den Enden der Striche. |
| Sans-Serif | Arial Verdana |
„Sans“ bedeutet ohne – diese Schriftarten haben keine zusätzlichen Verzierungen an den Enden. |
| Monospace | Courier New Lucida Console |
Alle Monospace-Zeichen haben dieselbe Breite. |
Schriftfamilie
Die Eigenschaft font-family legt die Schriftfamilie des Textes fest.
Die Eigenschaft font-family sollte mehrere Schriftnamen als „Fallback“-Mechanismus festlegen. Wenn der Browser die erste Schriftart nicht unterstützt, versucht er die nächste.
HinweisWenn der Name einer Schriftfamilie aus mehr als einem Wort besteht, muss er in Anführungszeichen gesetzt werden, wie z. B. font-family: "SimSun".
Mehrere Schriftfamilien werden durch Kommas getrennt angegeben:
Für häufiger verwendete Schriftkombinationen siehe unsereWebsicheren Schriftkombinationen。
Schriftstil
Die Eigenschaft font-style wird hauptsächlich verwendet, um kursiven Text anzugeben.
Diese Eigenschaft hat drei Werte:
- Normal – zeigt Text normal an
- Italic – zeigt Text kursiv an
- Oblique-Text – Text neigt sich zu einer Seite (sehr ähnlich wie kursiv, aber weniger unterstützt)
Beispiel
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Selbst ausprobieren »
Schriftgröße
Die Eigenschaft font-size legt die Größe des Textes fest.
Die Kontrolle über die Textgröße ist im Webdesign sehr wichtig. Allerdings können Sie durch Anpassen der Schriftgröße nicht erreichen, dass Absätze wie Überschriften oder Überschriften wie Absätze aussehen.
Bitte stellen Sie sicher, dass Sie die richtigen HTML-Tags verwenden, wie <h1> - <h6> für Überschriften und <p> für Absätze:
Schriftgrößenwerte können absolute oder relative Größen sein.
Absolute Größe:
- Text auf eine bestimmte Größe festlegen
- Ermöglicht Benutzern nicht, die Textgröße in allen Browsern zu ändern.
- Die absolute Größe ist nützlich, wenn die physische Größe der Ausgabe bekannt ist.
Relative Größe:
- Größe relativ zu umgebenden Elementen festlegen
- Ermöglicht Benutzern, die Textgröße im Browser zu ändern.
Wenn Sie keine Schriftgröße angeben, ist die Standardgröße dieselbe wie bei normalen Textabsätzen: 16 Pixel (16px = 1em).
Schriftgröße in Pixeln festlegen
Wenn Sie die Textgröße in Pixeln festlegen, haben Sie die volle Kontrolle über die Textgröße:
Im obigen Beispiel kann die Textgröße durch Zoomen des Browsers in Internet Explorer 9, Firefox, Chrome, Opera und Safari angepasst werden.
Obwohl die Textgröße mit dem Zoom-Werkzeug des Browsers angepasst werden kann, gilt diese Anpassung für die gesamte Seite, nicht nur für den Text.
Schriftgröße mit em festlegen
Um das Problem zu vermeiden, dass Text im Internet Explorer nicht angepasst werden kann, verwenden viele Entwickler die Einheit em anstelle von Pixeln.
Die Größeneinheit em wird vom W3C empfohlen.
1em entspricht der aktuellen Schriftgröße. Die Standard-Textgröße in einem Browser beträgt 16px.
Daher beträgt die Standardgröße von 1em 16px. Sie können Pixel mit der folgenden Formel in em umrechnen:px/16=em
Beispiel
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Selbst ausprobieren »
Im obigen Beispiel entspricht die Textgröße in em den Pixeln im vorherigen Beispiel. Wenn Sie jedoch die Einheit em verwenden, kann die Textgröße in allen Browsern angepasst werden.
Leider besteht das Problem bei IE-Browsern weiterhin. Wenn die Textgröße angepasst wird, wird sie größer oder kleiner als die normale Größe.
Verwendung von Prozent- und EM-Kombinationen
Die Lösung für alle Browser besteht darin, die Standardschriftgröße des <body>-Elements in Prozent festzulegen:
Beispiel
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Selbst ausprobieren »
Unser Code ist sehr effektiv. Er kann dieselbe Textgröße in allen Browsern anzeigen und ermöglicht allen Browsern, die Textgröße zu zoomen.
Weitere Beispiele
Schrift fett setzen
Dieses Beispiel zeigt, wie man die Fettdarstellung von Text einstellt.
Sie können die Schriftumwandlung festlegen
Dieses Beispiel zeigt, wie man die Schriftvariante festlegt.
Alle Schrift-Eigenschaften in einer Deklaration
Dieses Beispiel zeigt, wie man die Kurzform-Eigenschaft verwendet, um alle Schrifteigenschaften in einer einzigen Deklaration festzulegen.
Alle CSS-Schrifteigenschaften
| Eigenschaft | Beschreibung |
|---|---|
| font | Alle Schrifteigenschaften in einer Deklaration festlegen. |
| font-family | Gibt die Schriftfamilie des Textes an |
| font-size | Gibt die Schriftgröße des Textes an |
| font-style | Gibt den Schriftstil des Textes an |
| font-variant | Text in small-caps oder normaler Schrift anzeigen. |
| font-weight | Gibt das Schriftgewicht an. |