Die CSS-Schrifteigenschaften definieren die Schriftfamilie, die Freudigkeit, die Größe und den Stil eines Textes.
Unterschied zwischen Serif und Sans-Serif-Schriften
CSS Schriftfamilien
In CSS gibt es zwei Arten von Schriftfamiliennamen:
- generische Familie - eine Gruppe von Schriftfamilien mit einem ähnlichen Blick (wie "Serif" oder "Monospace")
- Schriftfamilie - eine spezifische Schriftfamilie (wie "Times New Roman" oder "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
 | Hinweis: Auf Computerbildschirmen, serifenlose Schriften sind einfacher als als Serif - Schriften zu lesen. |
|---|
Schriftfamilie
Die Schriftfamilie eines Textes mit dem Set font-family - Eigenschaft.
Die font-family - Eigenschaft sollte mehrere Font - Namen als "Rückfall" System halten. Wenn der Browser die erste Schriftart nicht unterstützt, versucht er, die nächste Schrift, und so weiter.
Beginnen Sie mit der Schriftart, die Sie möchten, und mit einer generischen Familie zu beenden, den Browser zu lassen eine ähnliche Schriftart in der generischen Familie wählen, wenn keine anderen Schriftarten zur Verfügung stehen.
Hinweis: Wenn der Name einer Schriftfamilie mehr als ein Wort ist, muss er in Anführungszeichen gesetzt werden, wie: "Times New Roman".
Mehr als eine Schriftfamilie ist in einer durch Kommata getrennte Liste angegeben:
Für gängige Schriftkombinationen verwendet, einen Blick auf unsere Web - Safe - Font - Kombinationen .
Schriftstil
Die font-style Eigenschaft wird meist verwendet , kursiver Text angeben.
Diese Eigenschaft hat drei Werte:
- normal - Der Text wird normal angezeigt
- kursiv - Der Text ist kursiv dargestellt
- schräg - Der Text wird "lehnt" (schräg ist sehr ähnlich kursiv, aber weniger unterstützt)
Beispiel
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} Versuch es selber " Schriftgröße
Die font-size Eigenschaft legt die Größe des Textes.
Die Möglichkeit, die Textgröße zu verwalten ist wichtig, in Web-Design. Allerdings sollten Sie nicht Schriftgröße Anpassungen verwenden, um Absätze wie Überschriften aussehen zu lassen, oder Überschriften aussehen Absätze.
Verwenden Sie immer die richtigen HTML-Tags wie <h1> - <h6> für Überschriften und <p> für Absätze.
Die font-size-Wert kann eine absolute oder relative Größe sein.
Absolute Größe:
- Setzt den Text an eine angegebene Größe
- Erlaubt nicht ein Benutzer die Textgröße in allen Browsern (für die Zugänglichkeit Gründen schlecht) zu ändern
- Absolute Größe ist nützlich, wenn die physikalische Größe des Ausgangs bekannt ist
Relative Größe:
- Legt die Größe im Verhältnis zu umgebenden Elementen
- Ermöglicht einem Benutzer die Textgröße in Browsern zu ändern
| Hinweis: Wenn Sie nicht über eine Schriftgröße angeben, die Standardgröße für den normalen Text, wie Absätze, ist 16px (16px = 1em). |
|---|
Schriftgröße einstellen Mit Pixel
Einstellen der Textgröße mit Pixeln gibt Ihnen die volle Kontrolle über die Textgröße:
Tipp: Wenn Sie Pixel verwenden, können Sie immer noch das Zoom - Werkzeug verwenden , um die gesamte Seite zu ändern.
Schriftgröße einstellen Mit Em
Damit Benutzer den Text, um die Größe (im Browser-Menü), verwenden viele Entwickler em anstelle von Pixeln.
Die em Größe Einheit wird vom W3C empfohlen.
1em ist gleich der aktuellen Schriftgröße. Der Standardtextgröße in Browsern ist 16px. So ist die Standardgröße von 1em 16px.
Die Größe kann von Pixeln em berechnet werden mit dieser Formel:Pixel/ 16 =em
Beispiel
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
} Versuch es selber " In dem obigen Beispiel ist die Schriftgröße in em der gleiche wie im vorherigen Beispiel in Pixeln. Doch mit der em Größe, ist es möglich, die Textgröße in allen Browsern anzupassen.
Leider gibt es immer noch ein Problem mit älteren Versionen von Internet Explorer. Der Text größer wird als es sollte, wenn aus größer und kleiner, als es sollte, wenn kleiner gemacht.
Verwenden Sie eine Kombination von Prozent und Em
Die Lösung, die in allen Browsern funktioniert, ist eine Standard-Schriftgröße in Prozent ein für das <body> -Element:
Beispiel
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} Versuch es selber " Unser Code funktioniert jetzt super! Es zeigt die gleiche Textgröße in allen Browsern und ermöglicht alle Browser den Text zu vergrößern oder die Größe!
Font Gewicht
Die font-weight - Eigenschaft gibt das Gewicht einer Schrift:
Font Variant
Die font-variant Eigenschaft gibt , ob ein Text in einer Small Caps Schriftart angezeigt werden.
In einem Small Caps Schriftart, alle Kleinbuchstaben in Großbuchstaben umgewandelt. Allerdings scheint die konvertierten Großbuchstaben in einer kleineren Schriftgröße als die ursprünglichen Großbuchstaben im Text.
Mehr Beispiele
Alle Schrifteigenschaften in einer Erklärung
Dieses Beispiel zeigt, wie die Kurzschrift-Eigenschaft zu verwenden, für alle die Schrifteigenschaften in einer Erklärung zu setzen.
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »
Alle CSS-Schrifteigenschaften
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |