CSS - Schriftarten: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, angehende Webentwickler! Heute tauchen wir in die wundervolle Welt der CSS-Schriftarten ein. Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich hier, um Sie auf dieser Reise Schritt für Schritt zu führen. Also, holen Sie sich eine Tasse Kaffee (oder Tee, wenn das mehr Ihr Ding ist) und los geht's!

Einführung in CSS-Schriftarten

Bevor wir ins Detail gehen, lassen Sie uns darüber sprechen, warum Schriftarten so wichtig sind. Stellen Sie sich vor, Sie lesen ein Buch, das entirely in Comic Sans geschrieben ist - keine besonders angenehme Erfahrung, oder? Das ist der Grund, warum die Wahl der richtigen Schriftart für Ihre Website entscheidend ist. Es ist wie das Auswählen des perfekten Outfits für ein erstes Date - Sie wollen einen guten Eindruck hinterlassen!

CSS-Schriftarten-Kurzform

Lassen Sie mit einem praktischen kleinen Trick namens der Schriftarten-Kurzform beginnen. Es ist wie ein Schweizer Army-Messer für Schriftarten-Styling - kompakt und vielseitig!

body {
font: italic small-caps bold 16px/2 Arial, sans-serif;
}

Diese einzelne Zeile setzt mehrere Schriftarten-Eigenschaften auf einmal. Lassen Sie es uns auseinandernehmen:

• italic: Schriftstil
• small-caps: Schriftvariante
• bold: Schriftgewicht
• 16px: Schriftgröße
• 2: Zeilenhöhe
• Arial, sans-serif: Schriftfamilie

Pretty neat, huh? Es ist wie das Bestellen eines Kombomeals anstelle einzelner Artikel!

CSS-Schriftarten mit mehreren Werten

Manchmal reicht eine Schriftart nicht aus. Da kommen mehrere Werte ins Spiel:

p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}

Das ist wie ein Backup-Plan. Wenn "Trebuchet MS" nicht verfügbar ist, wird es Verdana versuchen, und wenn das auch nicht klappt, wird es jede verfügbare sans-serif-Schriftart verwenden.

CSS-Schriftarten - Schriftfamilie

Von Schriftfamilien sprechen wir, lassen Sie uns tiefer einsteigen:

h1 {
font-family: Georgia, serif;
}
p {
font-family: Arial, sans-serif;
}

Hier verwenden wir unterschiedliche Schriftfamilien für Überschriften und Absätze. Es ist wie das Anziehen eines schicken Anzugs für Ihre Überschriften, während Ihre Absätze im smart casual-Outfit bleiben!

CSS-Schriftarten - Schriftmerkmal-Einstellungen

Nun werden wir mit Schriftmerkmal-Einstellungen fancy:

p {
font-feature-settings: "smcp" on, "swsh" 2;
}

Dies aktiviert kleine Kapitale und setzt den Schwenk auf Stufe 2. Es ist wie das Verleihen von Superkräften an Ihre Schriftarten!

CSS-Schriftarten - Mit der font-feature-settings-Eigenschaft

Schauen wir uns ein weiteres Beispiel für Schriftmerkmal-Einstellungen an:

.stylish-text {
font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1;
}

Dies aktiviert Standard-Ligaturen, diskretionäre Ligaturen und historische Ligaturen. Es ist wie das Verwandeln Ihres Textes in ein Kalligrafie-Meisterwerk!

CSS-Schriftarten - Schriftabstand

Kerning dreht sich alles um den Raum zwischen Zeichen:

.kerned-text {
font-kerning: normal;
}

Dies stellt sicher, dass zwischen den Buchstaben der richtige Abstand besteht. Es ist wie dem Text Raum zum Atmen zu geben!

CSS-Schriftarten - Schriftsprache-Überschreibung

Manchmal müssen Sie die Sprachvoreinstellungen überschreiben:

.japanese-text {
font-language-override: "JAN";
}

Dies weist den Browser an, Japanisch-spezifische Glyphenvarianten zu verwenden. Es ist wie dem Text zu sagen, er soll Japanisch sprechen!

CSS-Schriftarten - Schrift-Optische Größenanpassung

Optische Größenanpassung passt die Schrift basierend auf ihrer Größe an:

.headline {
font-optical-sizing: auto;
}

Dies lässt die Schrift ihre Erscheinung bei unterschiedlichen Größen optimieren. Es ist wie ein shape-shifting-Font für Ihren Text!

CSS-Schriftarten - Schrift-Paletten

Schrift-Paletten erlauben es Ihnen, voreingestellte Farbschemen zu verwenden:

@font-palette-values --custom-palette {
font-family: Pixelify Sans;
base-palette: 1;
}

.colored-text {
font-palette: --custom-palette;
}

Dies wirkt eine benutzerdefinierte Farbpalette auf Ihre Schrift an. Es ist wie dem Text ein Makeover zu verpassen!

CSS-Schriftarten - Schriftgröße

Schriftgröße ist ziemlich einfach:

body {
font-size: 16px;
}
h1 {
font-size: 2em;
}

Hier setzen wir eine Basisgröße für den Körper und machen die Überschriften doppelt so groß. Es ist wie ein Wachstumstrank für Ihren Text!

CSS-Schriftarten - Schriftgrößenanpassung

Schriftgrößenanpassung hilft, die Lesbarkeit über verschiedene Schriftarten hinweg zu erhalten:

.adjusted-text {
font-size-adjust: 0.5;
}

Dies passt die Schriftgröße basierend auf der x-Höhe an. Es ist wie dem Text ein Paar Plateau-Schuhe zu geben!

CSS-Schriftarten - Schriftdehnung

Schriftdehnung ermöglicht es Ihnen, Ihre Schrift zu komprimieren oder zu erweitern:

.stretched-text {
font-stretch: extra-expanded;
}

Dies macht Ihren Text breiter. Es ist wie Ihr Text hat die Gymnastik gemacht und Muskelmasse zugelegt!

CSS-Schriftarten - Mit der font-style-Eigenschaft

Schriftstil lässt Sie Ihren Text kursiv setzen:

.emphasized {
font-style: italic;
}

Dies gibt Ihrem Text eine Neigung. Es ist wie Ihr Text sich zu flüstern neigt!

CSS-Schriftarten - Mit der font-weight-Eigenschaft

Schriftgewicht kontrolliert, wie fett Ihr Text ist:

.important {
font-weight: bold;
}

Dies lässt Ihren Text hervorstechen. Es ist wie Ihr Text seine Muskeln zeigt!

CSS-Schriftarten - Mit der font-synthesis-Eigenschaft

Schriftsynthese kontrolliert, wie Browser fette oder kursive Versionen einer Schrift erstellen:

.no-fake-bold {
font-synthesis: none;
}

Dies verhindert, dass Browser eine synthetische fette Version erstellen. Es ist wie Ihrem Browser zu sagen, "Keine Fakes, bis Sie es wirklich können!"

CSS-Schriftarten - Mit der font-variant-Eigenschaft

Schriftvariante lässt Sie alternative Glyphen verwenden:

.smallcaps {
font-variant: small-caps;
}

Dies verwandelt Kleinbuchstaben in kleine Großbuchstaben. Es ist wie Ihr Text trägt ein kleines Smoking!

CSS-Schriftarten - Mit der font-variation-settings-Eigenschaft

Schriftvarianteinstellungen geben Ihnen feingranulierte Kontrolle über variable Schriftarten:

.custom-font {
font-variation-settings: "wght" 375, "wdth" 80;
}

Dies setzt benutzerdefinierte Gewicht- und Breitenwerte. Es ist wie ein maßgeschneidertes Hemd für Ihren Text!

CSS-Zeilenhöhe

Zeilenhöhe kontrolliert den Abstand zwischen Zeilen von Text:

p {
line-height: 1.5;
}

Dies setzt die Zeilenhöhe auf 1,5 Mal die Schriftgröße. Es ist wie Ihrem Text Raum zu geben, seine Beine zu strecken!

CSS-Schriftarten - Google Fonts

Google Fonts ist ein Schatzkästchen voller kostenloser, webfreundlicher Schriftarten:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

body {
font-family: 'Roboto', sans-serif;
}

Dies importiert und verwendet die Roboto-Schriftart. Es ist wie ein persönlicher Schriftarten-Stylist!

CSS-Schriftarten - Fallback-Schriftarten

Stellen Sie immer Fallback-Schriftarten bereit:

body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Dies stellt sicher, dass Ihr Text immer gut aussieht, auch wenn Ihre bevorzugte Schriftart nicht verfügbar ist. Es ist wie ein Backup-Plan für Ihren Backup-Plan!

CSS-Schriftarten - Zusammenfassung

Hier ist eine schnelle Zusammenfassung aller Schriftarteneigenschaften, die wir besprochen haben:

Eigenschaft	Beschreibung	Beispiel
font	Kurzfassung für mehrere Schriftarteneigenschaften	font: italic bold 16px/2 Arial, sans-serif;
font-family	Gibt die Schriftfamilie an	font-family: Arial, sans-serif;
font-feature-settings	Steuert erweiterte Typografie-Funktionen	font-feature-settings: "smcp" on;
font-kerning	Steuert den Schriftabstand	font-kerning: normal;
font-language-override	Überschreibt sprachspezifische Glyphen-Substitution	font-language-override: "JAN";
font-optical-sizing	Steuert die optische Größenanpassung	font-optical-sizing: auto;
font-palette	Gibt eine Schriftfarbpalette an	font-palette: --custom-palette;
font-size	Setzt die Schriftgröße	font-size: 16px;
font-size-adjust	Passt die Schriftgröße basierend auf der x-Höhe an	font-size-adjust: 0.5;
font-stretch	Steuert die Schriftdehnung	font-stretch: extra-expanded;
font-style	Setzt den Schriftstil (normal, kursiv, schräg)	font-style: italic;
font-weight	Setzt das Schriftgewicht	font-weight: bold;
font-synthesis	Steuert die Synthese von Schriftgesichtern	font-synthesis: none;
font-variant	Gibt die Schriftvariante an	font-variant: small-caps;
font-variation-settings	Steuert variable Schriftarten	font-variation-settings: "wght" 375;
line-height	Setzt die Zeilenhöhe	line-height: 1.5;

Und das war's, Leute! Ein umfassender Leitfaden zu CSS-Schriftarten. Denken Sie daran, Typografie ist eine Kunstform, und jetzt haben Sie die Werkzeuge, um ein wahrer Künstler zu werden. Frohes Coden und möge Ihre Schriftarten immer fantastisch sein!

Credits: Image by storyset