Wie nutze ich Schriftarten am besten in CSS?

Dieser Artikel führt Sie in ein einfaches, aber wichtiges Thema ein, nämlich Fonts In und gibt Ihnen auch eine praktische Demonstration zu diesem Thema. Die folgenden Hinweise werden in diesem Artikel behandelt:

• Schriftarten in CSS
• Attribute in CSS-Schriftart
• Attribut im Schriftstil
• Attribut Schriftgröße
• Schriftgrößenattribut
• Attribut der Schriftfamilie

Websites enthalten Inhalte in Form von Bildern, Audio-, Video- und Textinhalten. Die meisten Webseiten basieren jedoch immer noch auf Text als vorherrschendem Format. Dies liegt daran, dass Klartext einige sehr wichtige Vorteile bietet.

Nicht aufdringliche Lesbarkeit - Sie möchten die neuesten Spielergebnisse im Büro überprüfen. Natürlich möchten Sie eine schnelle Textaktualisierung, kein lautes Video!
Geringe Netzwerkbandbreitenanforderung - Textinhalte können auch in Bereichen mit schlechter Internetverbindung geladen werden, Rich Media hingegen nicht.
Suchfreundlich - Websites behalten immer im Auge, wie leicht ihre Inhalte in Suchmaschinen wahrgenommen werden. Text ist dafür am besten geeignet, zumindest bis AI das Internet vollständig übernimmt!

Beim Formatieren von Textinhalten müssen Webdesigner nur an wenigen Parametern arbeiten - Schriftart, Ausrichtung, Hervorhebung und Farbe. Die Auswahl der richtigen Schriftart für Ihren Text ist eine wichtige Wahl. Die Standardpraxis besteht darin, CSS-Schriftart-Tags zu verwenden, um Schriftarten für Text in HTML-Seiten zu definieren.
Wenn Sie neu in der Welt der HTML-Programmierung sind, erhalten Sie hier eine grundlegende Einführungstour. Vielleicht möchten Sie sich über die CSS-Grundlagen informieren, bevor Sie sich mit CSS-Schriftarten vertraut machen.

Ein umfassendes CSS-Tutorial finden Sie im Edureka CSS-Tutorial für Anfänger. Sie erhalten ein hervorragendes Heads-up darüber, wie CSS zur Erweiterung des HTML-Webdesigns verwendet werden soll.

Fahren Sie mit diesem Artikel über Schriftarten in CSS fort

Schriftarten in CSS

Eine Schriftart besteht im Wesentlichen aus einer Reihe von Merkmalen, die mit der Anzeige von Text verbunden sind. Schriftarten unterscheiden sich durch Größe, Einrückung, Breite, Neigung usw. Beginnen wir mit einer einfachen Textanzeige in verschiedenen Schriftarten.

Beispiel 1: Überschriften und Absätze in verschiedenen Schriftarten

body {Hintergrundfarbe: hellblau} h1 {Schriftart: fett 30px arial, serifenlos} h2 {Schriftart: 15px verdana} p {Schriftart: kursiv fett 12px / 30px Georgia, Serife}
Der Absatz in kursiver, fetter Georgia-Schrift
 

 Beispiel 1: Ausgabe 

In Beispiel 1 haben wir 3 verschiedene Textzeilen in verschiedenen Schriftarten. Sie werden feststellen, dass sich die einzelnen Schriftarten in ihren Zeichenbreiten, Einrückungen usw. unterscheiden.

Fahren Sie mit diesem Artikel über Schriftarten in CSS fort

Attribute in CSS-Schriftart

CSS-Schriftarten haben 4 Hauptattribute - Stil, Gewicht, Größe und Familie. Das Stilattribut kennzeichnet normal oder kursiv. Das Gewicht zeigt die Schrift als normal oder fett an. Das Gewicht kann auch numerisch ausgedrückt werden. Die Größe ist einfach die Schriftgröße größer die Größe, größer der Text im Aussehen. Es gibt mehrere Möglichkeiten, die Schriftgröße zuzuweisen. Detaillierte Beschreibungen finden Sie in späteren Abschnitten. Das Familienattribut besteht darin, dem Text den Schriftnamen zuzuweisen.

In Beispiel 1 haben wir unterschiedliche Schriftnamen für die Überschriften und den Absatz verwendet. Unter den Tags h1 und p werden zwei Schriftarten aufgelistet, während die Tags h2 nur eine Schriftart benennen. Dies ist die Definition einer Schriftfamilie, dazu später mehr.

Fahren Sie mit diesem Artikel über Schriftarten in CSS fort

Attribut im Schriftstil:

Die beiden primären Stile können festgelegt werden: 'Normal' und 'Kursiv'. Kursivschrift soll von Natur aus kursiv und schräg sein. Normal ist die Standardoption, die gerade ist. Es gibt eine andere weniger verwendete Option namens 'schräg', die der kursiven Option in den meisten Schriftarten ähnelt. Sie können den Stil auch auf 'erben' setzen, damit der Schriftstil vom übergeordneten Element übernommen wird.

Fahren Sie mit diesem Artikel über Schriftarten in CSS fort

Schriftgewichtsattribut:

Dieses Attribut entscheidet, ob die Schrift dick oder dünn erscheinen soll. Es kann auf 'normal' oder 'fett' eingestellt werden. Der Standardwert ist normal. Dieser Wert kann auch numerisch eingestellt werden. Das Gewicht von 400 steht für normal und 700 für fett. Es gibt nur wenige andere Einstellungen (von 100 - sehr hell bis 900 - sehr fett), aber sie werden nicht von allen Schriftarten unterstützt. Alle Gewichtsoptionen sind in Beispiel 3 gezeigt.

Fahren Sie mit diesem Artikel über Schriftarten in CSS fort

Schriftgrößenattribut:

Das Größenattribut kann auf verschiedene Arten festgelegt werden. Lassen Sie uns diese Möglichkeiten unten auflisten.
● Aufzählungswerte wie 'mittel', 'groß'. Genau wie bei Kleidungsgrößen können die Werte von XX Klein bis XX Groß reichen!
● Legen Sie relativ zum übergeordneten Element 'größer' oder 'kleiner' fest.
● Prozentsatz der Größe des übergeordneten Elements.
● Als 'erben' festlegen, um die Größe des übergeordneten Elements direkt zu übernehmen.
● Als absoluter Wert in Einheiten von px (Pixel), pt (Punkte) oder cm (Zentimeter)
'Mittel' ist der Standardwert für diesen Parameter.

Fahren Sie mit diesem Artikel über Schriftarten in CSS fort

Attribut der Schriftfamilie:

In HTML dient die CSS-Schriftfamilie zum Festlegen des Schriftnamens. Sie können entweder nur einen einzelnen Schriftnamen mit dem Tag versehen. Sie können auch mehrere Werte als Schriftfamilienliste zuweisen, die die Priorität definiert, in der der Browser die Schriftart auswählen soll.
Die Liste wird in Form eines Fallback-Systems von links nach rechts priorisiert. Der erste Wert, falls verfügbar, wird ausgewählt, oder die Steuerung wechselt zum nächsten, bis das Ende der Liste erreicht ist. Die Standardschriftfamilie wird durch die Browsereinstellungen definiert.
Es gibt zwei Arten von CSS-Schriftfamilien: generische Familien und Schriftfamilien.
● Generische Familien - Aufgrund einiger allgemeiner Merkmale werden Schriftarten in 'Serife', 'serifenlos', 'Monospace' usw. gruppiert. Sans serif bedeutet beispielsweise Schriftarten ohne Serifenstil.
● Familiennamen - Schriftarten, die zu bestimmten Familienhierarchien gehören. Times, Arial, Courier sind alle Schriftfamilien und Times New Roman ist eine Beispielschrift der Times-Familie.
Die verschiedenen Verwendungsoptionen für Schriftfamilien sind in Beispiel 4 unten aufgeführt.

Einige häufig zu beachtende Punkte

● Wie bei mehreren anderen CSS-Eigenschaften variieren einige der Schriftarteinstellungen in verschiedenen Browsern. Überprüfen Sie die Browserunterstützung, bevor Sie einige seltene Schriftarteinstellungen verwenden.
● Sie können die Schriftarteinstellungen separat festlegen, indem Sie die einzelnen Tags für Schriftstil, Schriftgröße usw. verwenden. Wenn Sie kompakten Code bevorzugen, können Sie alternativ das Kurzschrift-Schriftattribut mit allen Werten in derselben Zeile verwenden.
● In Benutzerszenarien, in denen die Schriftgröße je nach Browsergröße variieren soll, gibt es eine nützliche Schriftgrößeneinstellung, die als reaktionsfähige Schriftarteneinstellung bezeichnet wird. Es kann mit einer vw-Einheit eingestellt werden, was „Breite des Ansichtsfensters“ bedeutet. Auf diese Weise folgt die Textgröße der Größe des Browserfensters.

Ich hoffe, Sie haben die gesuchten Informationen in Fonts In CSS gefunden. Teilen Sie uns Ihre Erfahrungen im Kommentarbereich unten mit. Viel Spaß beim Entwerfen!

Wenn Sie mehr über die Webentwicklung erfahren möchten, lesen Sie die von Edureka. Mithilfe der Schulung zur Webentwicklungszertifizierung erfahren Sie, wie Sie mit HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- und Google-APIs beeindruckende Websites erstellen und für Amazon Simple Storage Service (S3) bereitstellen.