Grundlegende Text- und Schriftgestaltung
In diesem Artikel beginnen wir Ihre Reise zur Beherrschung der Textgestaltung mit CSS. Hier behandeln wir alle grundlegenden Aspekte der Text-/Schriftgestaltung im Detail, einschließlich der Einstellung des Schriftgewichts, der Schriftfamilie und des Stils, Schrift-Kurzschreibweise, Textausrichtung und anderer Effekte sowie der Zeilen- und Buchstabenzwischenräume.
Voraussetzungen: | Inhalte mit HTML strukturieren und CSS Styling Grundlagen. |
---|---|
Lernziele: |
|
Was beinhaltet die Textgestaltung mit CSS?
Text innerhalb eines Elements wird im Inhaltsfeld des Elements angeordnet. Er beginnt in der oberen linken Ecke des Inhaltsbereichs (oder in der oberen rechten Ecke bei RTL-Content) und fließt zum Ende der Zeile. Sobald er das Ende erreicht, geht er zur nächsten Zeile hinunter und fließt erneut zum Ende. Dieses Muster wird wiederholt, bis der gesamte Inhalt im Kasten platziert ist. Textinhalt verhält sich im Wesentlichen wie eine Reihe von Inline-Elementen, die auf benachbarte Linien gesetzt werden, und erstellt keine Zeilenumbrüche, bis das Ende der Zeile erreicht ist, es sei denn, Sie erzwingen manuell einen Zeilenumbruch mit dem <br>
-Element.
Hinweis: Wenn Ihnen der obige Absatz verwirrend erscheint, macht das nichts — gehen Sie zurück und sehen Sie sich unseren Artikel zum Box-Modell an, um die Theorie des Box-Modells aufzufrischen, bevor Sie weitermachen.
Die in der Textgestaltung verwendeten CSS-Eigenschaften fallen im Allgemeinen in zwei Kategorien, die wir in diesem Artikel separat betrachten werden:
- Schriftstile: Eigenschaften, die die Schrift eines Textes beeinflussen, z. B. welche Schrift angewendet wird, ihre Größe und ob sie fett, kursiv usw. ist.
- Texteigenschaftsstile: Eigenschaften, die den Abstand und andere Layoutmerkmale des Textes beeinflussen und zum Beispiel die Manipulation von Zeilen- und Buchstabenabständen oder die Ausrichtung des Textes im Inhaltsfeld ermöglichen.
Hinweis:
Beachten Sie, dass der Text innerhalb eines Elements als ein einziges Ganzes beeinflusst wird. Sie können keine Unterabschnitte des Textes auswählen und gestalten, es sei denn, Sie umwickeln sie mit einem geeigneten Element (wie <span>
oder <strong>
) oder verwenden ein text-spezifisches Pseudo-Element wie ::first-letter
(wählt den ersten Buchstaben des Textes eines Elements), ::first-line
(wählt die erste Zeile des Textes eines Elements) oder ::selection
(wählt den durch den Cursor aktuell markierten Text).
Schriften
Lassen Sie uns direkt zu den Eigenschaften zur Gestaltung von Schriften übergehen. In diesem Beispiel wenden wir einige CSS-Eigenschaften auf das folgende HTML-Beispiel an:
<h1>Tommy the cat</h1>
<p>Well I remember it as though it were a meal ago…</p>
<p>
Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
nestled its way into his mighty throat. Many a fat alley rat had met its
demise while staring point blank down the cavernous barrel of this awesome
prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
had many a story to tell. But it was a rare occasion such as this that he did.
</p>
Sie können das fertige Beispiel auf GitHub finden (siehe auch den Quellcode).
Farbe
Die color
-Eigenschaft setzt die Farbe des Vordergrundinhalts der ausgewählten Elemente, was in der Regel der Text ist, aber auch einige andere Dinge wie eine Unterstreichung oder Überstreichung einschließen kann, die mit der text-decoration
-Eigenschaft auf den Text angewendet wird.
Die color
-Eigenschaft kann jede CSS-Farben-Einheit akzeptieren, beispielsweise:
p {
color: red;
}
Dies bewirkt, dass die Absätze rot werden, anstatt der standardmäßigen Browservoreinstellung von schwarz, wie folgt:
Schriftfamilien
Um eine andere Schrift für Ihren Text festzulegen, verwenden Sie die font-family
-Eigenschaft — damit können Sie eine Schrift (oder eine Liste von Schriften) angeben, die der Browser auf die ausgewählten Elemente anwenden soll. Der Browser wird nur eine Schrift anwenden, wenn sie auf dem Computer verfügbar ist, auf dem die Webseite aufgerufen wird; falls nicht, wird er einfach eine Standardschrift des Browsers verwenden. Ein einfaches Beispiel sieht so aus:
p {
font-family: Arial;
}
Dies würde alle Absätze auf einer Seite dazu bringen, die Arial-Schrift zu übernehmen, die auf jedem Computer zu finden ist.
Websichere Schriften
Apropos Verfügbarkeit von Schriften: Es gibt nur eine begrenzte Anzahl von Schriften, die im Allgemeinen auf allen Systemen verfügbar sind und daher ohne große Bedenken verwendet werden können. Dies sind die sogenannten websicheren Schriften.
Die meiste Zeit möchten wir als Webentwickler mehr Kontrolle über die Schriften haben, die zur Darstellung unserer Textinhalte verwendet werden. Das Problem besteht darin, eine Möglichkeit zu finden, zu wissen, welche Schriftart auf dem Computer verfügbar ist, der unsere Webseiten anzeigt. Es gibt keine Möglichkeit, dies in jedem Fall zu wissen, aber die websicheren Schriften sind bekannt dafür, auf fast allen Instanzen der am häufigsten verwendeten Betriebssysteme (Windows, macOS, die häufigsten Linux-Distributionen, Android und iOS) verfügbar zu sein.
Die Liste der tatsächlichen websicheren Schriften wird sich mit der Entwicklung von Betriebssystemen ändern, aber es ist vernünftig, die folgenden Schriften derzeit als websicher zu betrachten (viele davon wurden durch die Microsoft-Initiative Kernschriften für das Web in den späten 90ern und frühen 2000ern popularisiert):
Name | Generischer Typ | Notizen |
---|---|---|
Arial | sans-serif | Es wird oft als Best Practice betrachtet, Helvetica als bevorzugte Alternative zu Arial hinzuzufügen, da, obwohl ihre Schriftbilder fast identisch sind, Helvetica als ansprechender in der Form betrachtet wird, selbst wenn Arial breiter verfügbar ist. |
Courier New | monospace | Einige Betriebssysteme haben eine alternative (möglicherweise ältere) Version der Courier New-Schrift namens Courier. Es wird als Best Practice betrachtet, beide mit Courier New als bevorzugte Alternative zu verwenden. |
Georgia | serif | |
Times New Roman | serif | Einige Betriebssysteme haben eine alternative (möglicherweise ältere) Version der Times New Roman-Schrift namens Times. Es wird als Best Practice betrachtet, beide mit Times New Roman als bevorzugte Alternative zu verwenden. |
Trebuchet MS | sans-serif | Sie sollten vorsichtig sein mit der Verwendung dieser Schrift — sie ist auf mobilen Betriebssystemen nicht weit verbreitet verfügbar. |
Verdana | sans-serif |
Hinweis: Unter verschiedenen Ressourcen pflegt die Website cssfontstack.com eine Liste von websicheren Schriften, die auf Windows- und macOS-Betriebssystemen verfügbar sind, was Ihnen helfen kann, Ihre Entscheidung zu treffen, was Sie für Ihre Zwecke als sicher betrachten.
Hinweis: Es gibt eine Möglichkeit, eine benutzerdefinierte Schrift zusammen mit einer Webseite herunterzuladen, um Ihnen zu ermöglichen, Ihre Schriftverwendung in jeder gewünschten Weise anzupassen: Webfonts. Dies ist etwas komplexer, und wir werden es in einem separaten Artikel später in diesem Modul besprechen.
Standardschriften
CSS definiert fünf generische Namen für Schriften: serif
, sans-serif
, monospace
, cursive
und fantasy
. Diese sind sehr generisch und die genaue Schriftart, die von diesen generischen Namen verwendet wird, kann sich zwischen jedem Browser und jedem Betriebssystem, auf dem sie angezeigt werden, unterscheiden. Sie stellen ein Worst-Case-Szenario dar, bei dem der Browser sein Bestes tut, um eine geeignete Schrift bereitzustellen. serif
, sans-serif
und monospace
sind ziemlich vorhersehbar und sollten etwas Angemessenes bieten. Dagegen sind cursive
und fantasy
weniger vorhersehbar, und wir empfehlen, sie sehr sorgfältig zu verwenden und unterwegs zu testen.
Die fünf Namen sind wie folgt definiert:
Begriff | Definition | Beispiel |
---|---|---|
serif |
Schriftarten, die Serifen haben (die Verzierungen und andere kleine Details, die Sie am Ende der Striche in einigen Schriftarten sehen). |
|
sans-serif |
Schriftarten, die keine Serifen haben. |
|
monospace |
Schriftarten, bei denen jedes Zeichen die gleiche Breite hat, normalerweise in Code-Listings verwendet. |
|
cursive |
Schriftarten, die beabsichtigt sind, Handschrift zu imitieren, mit fließenden, verbundenen Strichen. |
|
fantasy |
Dekorative Schriftarten. |
|
Schriftstapel
Da Sie die Verfügbarkeit der Schriften, die Sie auf Ihren Webseiten verwenden möchten, nicht garantieren können (auch ein Webfont könnte aus irgendeinem Grund fehlschlagen), können Sie einen Schriftstapel bereitstellen, sodass der Browser mehrere Schriften zur Auswahl hat. Dies beinhaltet einen font-family
-Wert bestehend aus mehreren durch Kommas getrennten Schriftnamen, z.B.
p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
In einem solchen Fall beginnt der Browser am Anfang der Liste und prüft, ob diese Schrift auf dem Computer verfügbar ist. Wenn ja, wird diese Schrift auf die ausgewählten Elemente angewendet. Wenn nicht, geht er zur nächsten Schrift über usw.
Es ist eine gute Idee, am Ende des Stapels einen geeigneten generischen Schriftnamen anzugeben, damit der Browser, falls keine der aufgeführten Schriften verfügbar ist, zumindest etwas ungefähr geeignetes bereitstellen kann. Um diesen Punkt zu verdeutlichen: Absätze erhalten die Standardschrift des Browsers, wenn keine andere Option verfügbar ist — was normalerweise Times New Roman ist — das ist nicht gut für eine sans-serif-Schrift!
Hinweis:
Während Sie Schriftnamen mit einem Leerzeichen wie Trebuchet MS
ohne Anführungszeichen verwenden können, wird zur Vermeidung von Escaping-Fehlern empfohlen, Schriftfamiliennamen, die Leerzeichen, Ziffern oder andere Satzzeichen als Bindestriche enthalten, zu zitieren.
Warnung:
Jeder Schriftfamilienname, der als generischer Familienname oder CSS-weites Schlüsselwort fehlinterpretiert werden könnte, muss zitiert werden. Während die Schriftfamiliennamen als <custom-ident>
oder als <string>
einbezogen werden können, müssen Schriftfamiliennamen, die zufällig die gleichen wie ein CSS-weites Eigenschaftswert wie initial
, oder inherit
, oder CSS einführen, die gleichen Namen wie einer der generischen Schriftfamiliennamen haben, wie sans-serif
oder fantasy
, als zitierte Zeichenfolge enthalten sein. Andernfalls wird der Schriftfamilienname als das äquivalente CSS-Schlüsselwort oder der generische Familienname interpretiert. Wenn sie als Schlüsselwörter verwendet werden, dürfen die generischen Schriftfamiliennamen — serif
, sans-serif
, monospace
, cursive
, und fantasy
— sowie die globalen CSS-Schlüsselwörter NICHT zitiert werden, da Zeichenfolgen nicht als CSS-Schlüsselwörter interpretiert werden.
Ein Beispiel für font-family
Lassen Sie uns unser vorheriges Beispiel erweitern, indem wir den Absätzen eine sans-serif-Schrift geben:
p {
color: red;
font-family: Helvetica, Arial, sans-serif;
}
Dies ergibt das folgende Resultat:
Schriftgröße
Im Artikel CSS-Werte und Einheiten unseres letzten Moduls haben wir Längen- und Größeneinheiten geprüft. Die Schriftgröße (eingestellt mit der font-size
-Eigenschaft) kann Werte annehmen, die in den meisten dieser Einheiten (und anderen, wie Prozentsätze) gemessen werden; jedoch sind die häufigsten Einheiten, die Sie zum Größen von Text verwenden werden:
px
(Pixel): Die Anzahl der Pixel, die der Text hoch sein soll. Dies ist eine absolute Einheit — sie führt zu demselben endgültigen berechneten Wert für die Schrift auf der Seite in nahezu jeder Situation.em
: 1em
ist gleich der Schriftgröße, die für das Elternelement des aktuellen Elements, das wir gestalten, festgelegt ist (genauer gesagt, die Breite eines Großbuchstabens M, der im Elternelement enthalten ist). Dies kann schwierig zu berechnen sein, wenn Sie viele verschachtelte Elemente mit unterschiedlichen Schriftgrößen haben, aber es ist machbar, wie Sie unten sehen werden. Warum sich die Mühe machen? Es ist ziemlich natürlich, sobald man sich daran gewöhnt hat, undem
kann verwendet werden, um alles zu skalieren, nicht nur Text. Sie können eine gesamte Website mitem
skalieren, was die Wartung erleichtert.rem
: Diese funktionieren genauso wieem
, außer dass 1rem
gleich der Schriftgröße ist, die für das Root-Element des Dokuments (d.h.<html>
) festgelegt ist, nicht für das Elternelement. Dies erleichtert die Mathematik, um die Schriftgrößen zu berechnen.
Die font-size
eines Elements wird von dem Elternelement dieses Elements geerbt. Dies beginnt alles mit dem Root-Element des gesamten Dokuments — <html>
— dessen Standard-font-size
auf 16px
über Browser hinweg festgelegt ist. Jeder Absatz (oder ein anderes Element, das keine andere Größe vom Browser festgelegt hat) innerhalb des Root-Elements hat eine endgültige Größe von 16px
. Andere Elemente können unterschiedliche Standardgrößen haben. Zum Beispiel hat ein h1-Element standardmäßig eine Größe von 2em
festgelegt, daher wird es eine endgültige Größe von 32px
haben.
Die Dinge werden komplizierter, wenn Sie beginnen, die Schriftgröße von verschachtelten Elementen zu ändern. Wenn Sie beispielsweise ein <article>
-Element auf Ihrer Seite hätten und seine font-size
auf 1,5 em
festlegen würden (was eine berechnete Endgröße von 24 px
ergeben würde), und dann möchten, dass die Absätze innerhalb der <article>
-Elemente eine berechnete Schriftgröße von 20 px
haben, welchen em
-Wert würden Sie verwenden?
<!-- document base font-size is 16px -->
<article>
<!-- If my font-size is 1.5em -->
<p>My paragraph</p>
<!-- How do I compute to 20px font-size? -->
</article>
Sie müssten den em
-Wert auf 20/24 oder 0,83333333 em
setzen. Die Mathematik kann kompliziert sein, daher müssen Sie vorsichtig sein, wie Sie Dinge gestalten. Es ist am besten, rem
zu verwenden, wo Sie können, um es einfacher zu halten, und vermeiden Sie es, die font-size
von Containerelementen festzulegen, wo möglich.
Schriftstil, Schriftgewicht, Textumwandlung und Textdekoration
CSS bietet vier gängige Eigenschaften, um das visuelle Gewicht/die Betonung von Text zu ändern:
-
font-style
: Wird verwendet, um kursiven Text ein- oder auszuschalten. Mögliche Werte sind wie folgt (Sie werden dies selten verwenden, es sei denn, Sie möchten aus irgendeinem Grund eine kursiv-formatierung ausschalten):normal
: Setzt den Text auf die normale Schrift zurück (schaltet vorhandene Kursiven aus).italic
: Setzt den Text auf die kursive Version der Schrift, falls verfügbar; wenn nicht, wird es Kursivschrift mit Schrägschnitt simulieren.oblique
: Setzt den Text auf eine simulierte Version einer kursiven Schrift, die durch Schrägstellung der normalen Version erstellt wird.
-
font-weight
: Bestimmt, wie fett der Text ist. Diese hat viele verfügbare Werte, falls Sie viele Schriftvarianten zur Verfügung haben (wie -leicht, -normal, -fett, -extrafett, -schwarz usw.), aber realistisch werden Sie selten etwas davon außernormal
undbold
verwenden:normal
,bold
: Normale und fette Schriftstärke.leichter
,fetter
: Setzt die Fettigkeit des aktuellen Elements eine Stufe leichter oder schwerer als die Fettigkeit des Elternelements.100
–900
: Numerische Gewichtswerte, die eine feinere Steuerung als die obigen Schlüsselwörter bieten, falls erforderlich.
-
text-transform
: Ermöglicht es Ihnen, Ihre Schrift in eine andere Form zu transformieren. Werte sind:none
: Verhindert jede Umwandlung.uppercase
: Wandelt alle Texte in Großbuchstaben um.lowercase
: Wandelt alle Texte in Kleinbuchstaben um.capitalize
: Wandelt alle Wörter um, damit der erste Buchstabe groß ist.full-width
: Wandelt alle Glyphen so um, dass sie in einem festen Breitenquadrat geschrieben werden, ähnlich einer Monospace-Schrift, wodurch es möglich wird, z. B. lateinische Zeichen mit asiatischen Schriftzeichen (wie Chinesisch, Japanisch, Koreanisch) auszurichten.
-
text-decoration
: Setzt/entfernt Textdekorationen auf Schriften (hauptsächlich um die Standard-Unterstreichung von Links abzuschalten, wenn Sie sie gestalten). Verfügbare Werte sind:none
: Entfernt alle bereits vorhandenen Textdekorationen.underline
: Unterstreicht den Text.overline
: Fügt dem Text eine Überstreichung hinzu.line-through
: Fügt einen Durchstrich über den Text hinzu.
Sie sollten beachten, dass
text-decoration
mehrere Werte gleichzeitig akzeptieren kann, wenn Sie mehrere Dekorationen gleichzeitig hinzufügen möchten, zum Beispieltext-decoration: underline overline
. Beachten Sie auch, dasstext-decoration
eine Kurzform-Eigenschaft fürtext-decoration-line
,text-decoration-style
undtext-decoration-color
ist. Sie können Kombinationen dieser Eigenschaftswerte verwenden, um interessante Effekte zu erzielen, zum Beispiel:text-decoration: line-through red wavy
.
Lassen Sie uns einige dieser Eigenschaften in unser Beispiel einfügen:
Unser neues Ergebnis sieht so aus:
html {
font-size: 10px;
}
h1 {
font-size: 5rem;
text-transform: capitalize;
}
h1 + p {
font-weight: bold;
}
p {
font-size: 1.5rem;
color: red;
font-family: Helvetica, Arial, sans-serif;
}
Textschlagschatten
Sie können Schlagschatten auf Ihren Text mit der text-shadow
-Eigenschaft anwenden. Dies nimmt bis zu vier Werte an, wie im folgenden Beispiel gezeigt:
text-shadow: 4px 4px 5px red;
Die vier Eigenschaften sind wie folgt:
- Der horizontale Versatz des Schattens vom ursprünglichen Text — dies kann die meisten verfügbaren CSS-Längen- und Größeneinheiten annehmen, aber Sie werden am häufigsten
px
verwenden; positive Werte bewegen den Schatten nach rechts, negative Werte nach links. Dieser Wert muss enthalten sein. - Der vertikale Versatz des Schattens vom ursprünglichen Text. Dies verhält sich ähnlich wie der horizontale Versatz, bewegt jedoch den Schatten nach oben/unten, nicht nach links/rechts. Dieser Wert muss enthalten sein.
- Der Weichzeichnungsradius: Ein höherer Wert bedeutet, dass der Schatten weiter gestreut wird. Wenn dieser Wert nicht enthalten ist, wird er auf 0 voreingestellt, was keine Weichzeichnung bedeutet. Dies kann die meisten verfügbaren CSS-Längen- und Größeneinheiten annehmen.
- Die Grundfarbe des Schattens, die jede CSS-Farbeneinheit annehmen kann. Wenn sie nicht enthalten ist, wird
currentcolor
als Standardwert angenommen, d.h. die Farbe des Schattens wird aus dercolor
-Eigenschaft des Elements übernommen.
Mehrere Schatten
Sie können mehrere Schatten auf denselben Text anwenden, indem Sie mehrere Schattenwerte durch Kommas voneinander trennen, zum Beispiel:
h1 {
text-shadow:
1px 1px 1px red,
2px 2px 1px red;
}
Wenn wir dies auf das h1-Element in unserem Tommy The Cat-Beispiel anwenden würden, würden wir folgendes Ergebnis erzielen:
Hinweis:
Sie können weitere interessante Beispiele für die Verwendung von text-shadow
im Sitepoint-Artikel Moonlighting with CSS text-shadow sehen.
Textlayout
Mit den grundlegenden Schrifteigenschaften erledigt, werfen wir einen Blick auf die Eigenschaften, die wir verwenden können, um das Textlayout zu beeinflussen.
Textausrichtung
Die text-align
-Eigenschaft wird verwendet, um zu steuern, wie Text innerhalb seines umgebenden Inhaltsfelds ausgerichtet wird. Die verfügbaren Werte sind unten aufgeführt. Sie funktionieren ziemlich genauso, wie sie es in einer regulären Textverarbeitungsanwendung tun:
left
: Linksbündig ausgerichteter Text.right
: Rechtsbündig ausgerichteter Text.center
: Zentriert den Text.justify
: Der Text wird so verteilt, dass alle Zeilen dieselbe Breite haben, indem die Abstände zwischen den Worten variiert werden. Diese Eigenschaft sollte sorgfältig verwendet werden, da sie, besonders bei Absätzen mit vielen langen Wörtern, schlecht aussehen kann. Wenn Sie dies verwenden möchten, sollten Sie in Betracht ziehen, etwas anderes damit zu kombinieren, wie etwahyphens
, um einige der längeren Wörter über mehrere Zeilen zu trennen.
Wenn wir text-align: center;
auf das h1 unseres Beispiels anwenden würden, würden wir folgendes Ergebnis bekommen:
html {
font-size: 10px;
}
h1 {
font-size: 5rem;
text-transform: capitalize;
text-shadow:
1px 1px 1px red,
2px 2px 1px red;
text-align: center;
}
h1 + p {
font-weight: bold;
}
p {
font-size: 1.5rem;
color: red;
font-family: Helvetica, Arial, sans-serif;
}
Zeilenhöhe
Die line-height
-Eigenschaft legt die Höhe jeder Textzeile fest. Diese Eigenschaft kann nicht nur die meisten Längen- und Größeneinheiten annehmen, sondern auch einen einheitenlosen Wert, der als Multiplikator fungiert und allgemein als die beste Option betrachtet wird. Bei einem einheitenlosen Wert wird die font-size
multipliziert und ergibt die line-height
. Fließtext sieht im Allgemeinen schöner aus und ist leichter zu lesen, wenn die Zeilen auseinandergezogen sind. Die empfohlene Zeilenhöhe liegt bei etwa 1,5 – 2 (doppelter Zeilenabstand). Um unsere Textzeilen auf 1,6 Mal der Höhe der Schrift zu setzen, würden wir folgenden CSS-Code verwenden:
p {
line-height: 1.6;
}
Die Anwendung auf die <p>
-Elemente in unserem Beispiel würde folgendes Ergebnis erzeugen:
html {
font-size: 10px;
}
h1 {
font-size: 5rem;
text-transform: capitalize;
text-shadow:
1px 1px 1px red,
2px 2px 1px red;
text-align: center;
}
h1 + p {
font-weight: bold;
}
p {
font-size: 1.5rem;
color: red;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.6;
}
Buchstaben- und Wortabstände
Die letter-spacing
- und word-spacing
-Eigenschaften erlauben Ihnen, den Abstand zwischen Buchstaben und Wörtern in Ihrem Text zu setzen. Sie werden diese nicht sehr oft verwenden, aber vielleicht bei einem bestimmten Aussehen oder um die Lesbarkeit einer besonders dichten Schrift zu verbessern. Sie können die meisten Längeneinheiten annehmen.
Um dies zu veranschaulichen, könnten wir etwas Wort- und Buchstabenabstand auf die erste Zeile jedes <p>
-Elements in unserem HTML-Beispiel anwenden mit folgendem Code:
p::first-line {
letter-spacing: 4px;
word-spacing: 4px;
}
Dies rendert unser HTML folgendermaßen:
html {
font-size: 10px;
}
h1 {
font-size: 5rem;
text-transform: capitalize;
text-shadow:
1px 1px 1px red,
2px 2px 1px red;
text-align: center;
letter-spacing: 2px;
}
h1 + p {
font-weight: bold;
}
p {
font-size: 1.5rem;
color: red;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.6;
letter-spacing: 1px;
}
Weitere erwähnungswerte Eigenschaften
Die oben genannten Eigenschaften geben Ihnen eine Vorstellung davon, wie Sie beginnen können, Text auf einer Webseite zu gestalten, aber es gibt viele weitere Eigenschaften, die Sie verwenden könnten. Wir wollten hier nur die wichtigsten abdecken. Sobald Sie sich an die Verwendung der oben genannten gewöhnt haben, sollten Sie auch die folgenden erforschen:
Schriftstile:
font-variant
: Wechseln Sie zwischen kleinen Großbuchstaben und normalen Schriftalternativen.font-kerning
: Schalten Sie Schriftkerning-Optionen ein und aus.font-feature-settings
: Schalten Sie verschiedene OpenType-Schriftmerkmale ein und aus.font-variant-alternates
: Kontrollieren Sie die Verwendung von alternativen Glyphen für eine gegebene Schriftart.font-variant-caps
: Kontrollieren Sie die Verwendung von alternativen Großbuchstabenglyphen.font-variant-east-asian
: Kontrollieren Sie die Verwendung von alternativen Glyphen für ostasiatische Schriften wie Japanisch und Chinesisch.font-variant-ligatures
: Kontrollieren Sie, welche Ligaturen und kontextuellen Formen im Text verwendet werden.font-variant-numeric
: Kontrollieren Sie die Verwendung von alternativen Glyphen für Zahlen, Brüche und Ordnungsmarker.font-variant-position
: Kontrollieren Sie die Verwendung von alternativen Glyphen kleinerer Größen, die als Hoch- oder Tiefzeichen positioniert sind.font-size-adjust
: Passen Sie die visuelle Größe der Schrift von ihrer tatsächlichen Schriftgröße unabhängig an.font-stretch
: Wechseln Sie zwischen möglichen alternativen gedehnten Versionen einer gegebenen Schrift.text-underline-position
: Legen Sie die Position von Unterstreichungen fest, die mit dertext-decoration-line
-Eigenschaftunderline
-Wert gesetzt sind.text-rendering
: Versuchen Sie, einige Text-Rendering-Optimierungen durchzuführen.
Texteigenschaftsstile:
text-indent
: Geben Sie an, wie viel horizontaler Platz vor dem Anfang der ersten Zeile des Textinhalts gelassen werden soll.text-overflow
: Definieren Sie, wie überfließender Inhalt, der nicht angezeigt wird, den Nutzern signalisiert wird.white-space
: Definieren Sie, wie Leerzeichen und assoziierte Zeilenumbrüche innerhalb des Elements behandelt werden.word-break
: Geben Sie an, ob Zeilen innerhalb von Wörtern gebrochen werden sollen.direction
: Definieren Sie die Schreibrichtung. (Dies hängt von der Sprache ab und üblicherweise ist es besser, HTML diese Aufgabe zu überlassen, da sie mit dem Textinhalt verbunden ist.)hyphens
: Schalten Sie Silbentrennung für unterstützte Sprachen ein und aus.line-break
: Entspannen oder verstärken Sie den Zeilenumbruch für asiatische Sprachen.text-align-last
: Definieren Sie, wie die letzte Zeile eines Blocks oder einer Zeile, direkt vor einem erzwungenen Zeilenumbruch, ausgerichtet ist.text-orientation
: Definieren Sie die Orientierung des Textes in einer Zeile.overflow-wrap
: Geben Sie an, ob der Browser Zeilen innerhalb von Wörtern brechen darf, um Überlauf zu verhindern.writing-mode
: Bestimmen Sie, ob Textzeilen horizontal oder vertikal angeordnet sind und in welche Richtung nachfolgende Zeilen fließen.
Schrift-Kurzform
Viele Schrifteigenschaften können auch über die Kurzschreibweise-Eigenschaft font
festgelegt werden. Diese werden in folgender Reihenfolge geschrieben: font-style
, font-variant
, font-weight
, font-stretch
, font-size
, line-height
, und font-family
.
Unter all diesen Eigenschaften sind nur font-size
und font-family
erforderlich, wenn Sie die font
-Kurzform-Eigenschaft verwenden.
Ein Schrägstrich muss zwischen den font-size
- und line-height
-Eigenschaften gesetzt werden.
Ein vollständiges Beispiel würde so aussehen:
font:
italic normal bold normal 3em/1.5 Helvetica,
Arial,
sans-serif;
Aktives Lernen: Spielen mit der Gestaltung von Text
In dieser aktiven Lernsitzung haben wir keine spezifischen Übungen für Sie vorbereitet. Wir möchten nur, dass Sie ein wenig mit einigen Schrift-/Textlayout-Eigenschaften experimentieren. Sehen Sie selbst, was Sie entwickeln können! Sie können dies entweder mit Offline-HTML/CSS-Dateien tun oder Ihren Code in das untenstehende live editierbare Beispiel eingeben.
Wenn Sie einen Fehler machen, können Sie ihn jederzeit mit der Zurücksetzen-Schaltfläche zurücksetzen.
Zusammenfassung
Wir hoffen, dass Ihnen das Spielen mit Text in diesem Artikel gefallen hat! Der nächste Artikel bietet Ihnen alles, was Sie über die Gestaltung von HTML-Listen wissen müssen.
Siehe auch
- Alles über die CSS font-family Eigenschaft, explainers.dev
- Web-sichere Schriftarten, Scrimba MDN learning partner