CSS - Web-Schriften: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Webdesigner! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der CSS Web-Schriften zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich Ihnen sagen, dass das Verständnis von Schriften wie das Lernen einer neuen Sprache ist - es mag initially überwältigend erscheinen, aber wenn Sie den Dreh raus kriegen, werden Sie erstaunt sein, wie es Ihre Webseiten transformiert!

Was sind Web-Schriften?

Bevor wir uns den Details widmen,fangen wir mit den Grundlagen an. Web-Schriften sind benutzerdefinierte Schriften, die Sie auf Ihrer Webseite verwenden können, unabhängig davon, ob sie auf dem Computer eines Benutzers installiert sind. Sie sind wie die einzigartige Stimme Ihrer Webseite!

Warum sind Web-Schriften wichtig?

Stellen Sie sich vor, jedes Buch der Welt würde die gleiche Schriftart verwenden. Langweilig, oder? Web-Schriften ermöglichen es Ihnen, die Persönlichkeit Ihrer Webseite auszudrücken und die Lesbarkeit zu verbessern. Sie sind das Geheimrezept, das Ihre Website von der Masse abheben lässt!

CSS Web-Schriften - Schriftartenformate

Nun, lassen Sie uns über die verschiedenen Schriftartenformate sprechen. Es ist wie das Wahl zwischen verschiedenen Eiscreme-Sorten - jede hat ihre eigenen Eigenschaften!

Format	Beschreibung	Browser-Unterstützung
TTF/OTF	TrueType-Schriftart / OpenType-Schriftart	Alle modernen Browser
WOFF	Web Open Font Format	Alle modernen Browser
WOFF2	Web Open Font Format 2	Die meisten modernen Browser
EOT	Embedded OpenType	Internet Explorer
SVG	Skalierbare Vektorgrafik	Ältere iOS-Versionen

Machen Sie sich keine Sorgen, wenn das wie eindurcheinandergebrachte Abkürzungen seem. Wir werden das im Laufe der Zeit auseinanderhalten!

CSS Web-Schriften - Wichtige Punkte

Bevor wir mit dem Code loslegen, lassen Sie uns einige wichtige Punkte besprechen:

1. Web-Schriften ermöglichen es Ihnen, benutzerdefinierte Schriften auf Ihrer Webseite zu verwenden.
2. Sie werden von einem Server geladen, nicht vom Computer des Benutzers.
3. Sie können Dienste wie Google Fonts verwenden oder Schriften selbst hosten.
4. Es gibt verschiedene Schriftformate für die Browserkompatibilität.
5. Die Regel @font-face wird verwendet, um benutzerdefinierte Schriften in CSS zu definieren.

CSS Web-Schriften - @font-face At-Rule

Nun tauchen wir in den Code ein! Die Regel @font-face ist wie das Vorstellen einer neuen Schrift auf Ihrer Webseite. So sieht es aus:

@font-face {
font-family: 'MeineTolleSchrift';
src: url('Pfad/zu/meiner-tollen-schrift.woff2') format('woff2'),
url('Pfad/zu/meiner-tollen-schrift.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Lassen Sie uns das auseinandernehmen:

• font-family: Dies ist der Name, den Sie Ihrer Schrift geben. Sie werden diesen Namen später verwenden, um die Schrift auf Elementen anzuwenden.
• src: Dies gibt an, wo die Schriftdatei zu finden ist und in welchem Format sie vorliegt.
• font-weight und font-style: Diese definieren die Eigenschaften der Schrift.

Nachdem Sie Ihre Schrift definiert haben, können Sie sie so verwenden:

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

Dies sagt dem Browser: "Hey, verwende MeineTolleSchrift, aber wenn du sie nicht finden kannst, verwende jede sans-serif Schrift."

CSS Web-Schriften - @font-face / font-stretch

Das Attribut font-stretch ist wie eine Yogastunde für Ihre Schriften. Es ermöglicht Ihnen, die Schrift zu dehnen oder zu komprimieren. So können Sie es verwenden:

@font-face {
font-family: 'DehnbareSchrift';
src: url('Pfad/zu/dehnbaren-schrift.woff2') format('woff2');
font-stretch: ultra-expanded;
}

.dehnbaren-text {
font-family: 'DehnbareSchrift';
font-stretch: 150%;
}

Dies wird Ihren Text aussehen lassen, als ob er ins Fitnessstudio gegangen und ein bisschen an Muskelmasse zugelegt hat!

CSS Web-Schriften - Online Schrift-Dienst

Die Nutzung eines Online-Schrift-Dienstes ist wie das Bestellen von Takeaway anstatt zu kochen - es ist bequem und es gibt eine große Auswahl. Google Fonts ist eine beliebte Wahl. So können Sie es verwenden:

1. Gehen Sie zu Google Fonts und wählen Sie eine Schrift, die Ihnen gefällt.
2. Kopieren Sie das bereitgestellte Link-Tag und fügen Sie es in den <head>-Teil Ihres HTML ein:

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

3. Verwenden Sie die Schrift in Ihrem CSS:

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

Und voilà! Sie verwenden jetzt eine benutzerdefinierte Schrift von Google Fonts.

CSS Web-Schriften - Schrift importieren

Eine andere Möglichkeit, Web-Schriften einzubeziehen, ist die Verwendung der Regel @import. Es ist, als lädt man eine Schrift zu einer CSS-Party ein. So funktioniert es:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

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

Diese Methode ermöglicht es Ihnen, alle Ihre Schriftanzeigen in Ihrer CSS-Datei zu behalten, was einige Entwickler für die Organisation bevorzugen.

Fazit

Herzlichen Glückwunsch! Sie haben gerade Ihre ersten Schritte in die wundervolle Welt der CSS Web-Schriften unternommen. Erinnern Sie sich daran, dass wie beim Erlernen jeder neuen Fähigkeit, Übung den Meister macht. Haben Sie keine Angst, mit verschiedenen Schriften zu experimentieren und zu sehen, wie sie das Aussehen und Gefühl Ihrer Webseiten verändern.

Als wir uns verabschieden, hier ist eine kleine Geschichte aus meiner Unterrichtserfahrung: Ich hatte einmal eine Schülerin, die mit Webdesign kämpfte. Sie konnte nicht herausfinden, warum ihre Websites so ... langweilig aussahen. Dann haben wir Web-Schriften behandelt, und es war, als würde ein Licht aufgehen. Plötzlich wurden ihre Websites von langweilig zu schön. Das ist die Kraft der Web-Schriften!

Also, machen Sie sich auf den Weg, spielen Sie mit Schriften und sehen Sie zu, wie Ihre Webseiten zum Leben erwachen. Viel Spaß beim Coden, und denken Sie daran - in der Welt des Webdesigns ist die einzige Grenze Ihre Vorstellungskraft!

Credits: Image by storyset