HTML - Schriften: Ein Anfängerleitfaden für das Styling von Text im Web
Hallo, angehende Web-Entwickler! Heute tauchen wir in die aufregende Welt der HTML-Schriften ein. Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich hier, um Sie durch die Feinheiten des toll aussehenden Designs Ihres Webtextes zu führen. Los geht's!
Was sind HTML-Schriften?
Bevor wir ins Detail gehen, lassen Sie uns verstehen, was wir mit "Schriften" in HTML meinen. In einfachen Worten sind Schriften die Textstile, die Sie auf einer Webseite sehen. Sie können groß, klein, fett, kursiv oder sogar schicke Schreibschriftarten sein. HTML bietet uns Möglichkeiten, wie unser Text aussieht, und macht unsere Webseiten ansprechender und leichter lesbar.
Web-Sicherheits-Schriften
Nun, lassen Sie uns über etwas called "Web-Sicherheits-Schriften" sprechen. Stellen Sie sich vor, Sie schreiben einen Brief an einen Freund. Sie möchten sicherstellen, dass er ihn lesen kann, oder? Web-Sicherheits-Schriften sind wie die Verwendung einer gemeinsamen Handschrift, die jeder verstehen kann.
Web-Sicherheits-Schriften sind Schriften, die auf den meisten Computern und Geräten wahrscheinlich vorhanden sind. Durch die Verwendung dieser können wir sicherstellen, dass unsere Webseiten auf verschiedenen Systemen ähnlich aussehen.
Hier ist eine Tabelle mit einigen häufigen Web-Sicherheits-Schriften:
| Schriftname | Beispiel |
|---|---|
| Arial | Dies ist Arial |
| Verdana | Dies ist Verdana |
| Helvetica | Dies ist Helvetica |
| Times New Roman | Dies ist Times New Roman |
| Courier | Dies ist Courier |
Beispiele für HTML-Schriften
Lassen Sie uns mit ein wenig Code herumspielen! Hier sind einige Beispiele dafür, wie wir Schriften in HTML verwenden können:
Beispiel 1: Grundlegende Schrift-Einstellung
<p style="font-family: Arial, sans-serif;">Dieser Text ist in Arial-Schrift.</p>In diesem Beispiel sagen wir dem Browser, den Text in Arial-Schrift anzuzeigen. Der Teil "sans-serif" ist ein Fallback, falls Arial auf dem Gerät des Benutzers nicht verfügbar ist.
Beispiel 2: Verwendung mehrerer Schriften
<p style="font-family: 'Times New Roman', Times, serif;">Dieser Text könnte in Times New Roman, Times oder einer serifenbetonten Schrift sein.</p>Hier bieten wir mehrere Schriftarten an. Der Browser versucht zuerst Times New Roman zu verwenden, dann Times, falls die erste nicht verfügbar ist, und schließlich jede serifenbetonte Schrift, falls weder die ersten beiden noch vorhanden sind.
Beispiel 3: Kombination von Schriftstilen
<p style="font-family: Arial, sans-serif; font-size: 18px; font-weight: bold;">Dieser Text ist Arial, größer und fett.</p>In diesem Beispiel 设置 nicht nur die Schriftfamilie, sondern auch ihre Größe und Dicke. Dies gibt uns mehr Kontrolle darüber, wie unser Text aussieht.
Schriftfarbe einstellen
Nun, lassen Sie uns ein wenig Farbe in unser Leben... ähm, ich meine, unseren Text bringen!
Beispiel 4: Text einfärben
<p style="color: blue;">Dieser Text ist blau!</p>Einfach, oder? Wir verwenden die Eigenschaft color, um die Textfarbe festzulegen.
Beispiel 5: Verwendung von Hexadezimalfarben
<p style="color: #FF5733;">Dieser Text hat eine benutzerdefinierte Farbe.</p>Hexadezimalfarben geben uns präzisere Kontrolle über die Farbe. In diesem Fall verwenden wir eine bestimmte Orange-Schattierung.
HTML
Nun, ich habe eine kleine Geschichte für Sie. Es war einmal ein HTML-Element namens <basefont>. Es wurde verwendet, um eine Standardschrift für ein gesamtes HTML-Dokument festzulegen. Wie viele Dinge in der Technologie jedoch wurde es veraltet und wird nicht mehr in HTML5 unterstützt.
Anstelle von <basefont> verwenden wir jetzt CSS, um Standardschriften für unser gesamtes Dokument festzulegen. Hier ist, wie wir das machen:
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333333;
}
</style>Dieser CSS-Code, der im <head>-Abschnitt Ihres HTML-Dokuments platziert wird, legt eine Standardschrift (Arial), Größe (16 Pixel) und Farbe (dunkelgrau) für alle Texte im <body> Ihrer Webseite fest.
Fazit
Und da haben Sie es, Leute! Wir haben die Welt der HTML-Schriften bereist, von sicheren Optionen bis hin zur Farbeinstellung und Styling. Denken Sie daran, der Schlüssel zum Beherrschen von Schriften ist die Übung. Versuchen Sie verschiedene Kombinationen, spielen Sie mit Größen und Farben und sehen Sie, was am besten für Ihre Webseiten aussieht.
Als wir uns abschließen, hier ist ein kleiner Tipp aus meinen Jahren des Unterrichtens: Haben Sie keine Angst zu experimentieren! Die Schönheit der Webentwicklung ist, dass Sie immer rückgängig machen und neu probieren können. Also gehen Sie voran, sein mutig mit Ihren Schriften, und viel Spaß beim Coden!
Credits: Image by storyset