CSS -Schriftarten

Schriftarten sind die wichtigsten Komponenten, die wir auf jeder Website sehen. Wenn Sie also eine Website erstellen, ist es sehr wichtig, die richtige/geeignete Schriftart zu wählen. Schriftarten verbessern das visuelle Erscheinungsbild einer Website und die Verwendung geeigneter Schrift trägt zur Erhöhung der Lesbarkeit und Effektivität jeder Website bei.

Generische Schriftfamilien in CSS

Es gibt fünf Arten von Schriftfamilien in CSS I.e. Serife, Sans-Serif, Monospace, Fantasie und Kursiv. Alle diese Schriftfamilien werden verwendet, um das Aussehen/die Form der Schriftarten anzugeben:

1. Serifen Schriftarten Haben Sie kleine stilvolle Striche am Rande der Buchstaben
2. Serifenlos Schriftarten haben einfache Briefe, keinen Schlaganfall. Diese Schriftarten können leicht lesbar sind.
3. Monospace Schriftarten sind feste Briefe feste Breite. Meistens verwendet, um den Programmiercode darzustellen
4. Kursiv Schriftarten sind dem menschlichen Schreiben sehr ähnlich
5. Fantasie Schriftarten haben dekoratives/ausgefallenes Aussehen

Visueller Unterschied von generischen Schriftfamilien

Das folgende Snippet bietet eine Richtlinie, um den Formenunterschied von generischen Schriftfamilien zu verstehen

Verschiedene Arten von generischen Schriftfamilien

Die untergegebene Abbildung zeigt die verschiedenen Arten jeder generischen Schriftfamilie:

CSS -Schriftarten

In CSS kann das Erscheinungsbild des Textes auf verschiedene Weise geändert werden, z. B. die Auswahl der Schriftstil, Schriftfamilie, Schriftfarbe, Schriftgröße usw. Da die korrekte Verwendung von Schriftart einen großen Einfluss auf den Text und die Erfahrung des Lesers hat, bietet CSS zahlreiche Schriftarteigenschaften, mit denen das Aussehen von Schriftarten angepasst werden kann. Diese Beschreibung richtet sich an die folgenden Schriftarten:

• Schriftfamilie
• Schriftstil
• Schriftvariante
• Schriftgröße
• Schriftgewicht
• Schriftart Kurzschrift

Beginnen wir mit der Schriftfamilie.

CSS -Schriftfamilie

Diese Eigenschaft wird verwendet, um die Schriftfamilie für jedes HTML -Element E anzugeben.G. "Arial", "Times New Roman", usw. Oder wir können eine generische Schriftfamilie verwenden e.G. Serife, Kursiv usw.

Beispiel

Das untergegebene Beispiel verwendet die Serifenschriften für die

Element- und Kursivschriften für die

Elemente:

Html

CSS -Schriftarten

Erster Paragraph

Zweiter Absatz

CSS

H3
Schriftfamilie: 'Times New Roman', Times, Serif;

P
Schriftfamilie: Kursiv;

Das obige Code zeigt die folgende Ausgabe an:

CSS-Schriftstil

Um einen bestimmten Stil für ein HTML-Element zu definieren, wird die Eigenschaft im Schriftart verwendet. Die Eigenschaft im Schriftarten kann einen normalen, schrägen oder kursiven Wert haben.

Beispiel

Im folgenden Code der Schriftstil von

Das Element wird zum kursiven Stil geändert:

Html

CSS -Schriftarten

Erster Paragraph

Zweiter Absatz

CSS

H3
Schriftstil: kursiv;

Das obige Ausschnitt zeigt das folgende Ergebnis:

Die schrägen, normalen Werte können für die Eigenschaft im Schriftart verwendet werden. Der Schrägwert führt zu Ergebnissen, die dem kursiven Stil sehr ähnlich sind.

CSS-Schriftart-Variante

Es kann einen Wert „kleine Caps“ benötigen, der die Buchstaben in kleine Großbuchstaben umwandelt (Großbuchstaben, aber kleiner).

Beispiel

Der untergegebene Code demonstriert die Auswirkung der Schriftart-Varianten-Eigenschaft auf die

Element:

Html

CSS -Schriftarten

Erster Paragraph

Zweiter Absatz

CSS

P
Schriftvariante: Small-Caps;

Der obige Code liefert das folgende Ergebnis:

CSS-Schriftgröße

Die Eigenschaft mit Schriftgrößen wird für die Festlegung der Textgröße und des Werts für die Schriftgröße als klein, groß, mittel usw. angegeben., oder in Bezug auf PX, EM, %usw.

Der untergegebene Code geben die Schriftgröße für die an

Element als extra groß:

Html

CSS -Schriftarten

Erster Paragraph

Zweiter Absatz

CSS

P
Schriftgröße: x-large;

Der obige Snippet erzeugt das folgende Ergebnis:

Die Ausgabe überprüft, dass der Text von

Elemente sind größer als die normale Schriftgröße.

CSS-Schriftgewicht

Die Schriftgewichtseigenschaft wird verwendet, um das Schriftgewicht in einigen spezifischen Werten wie fett, normal, leichter usw. festzulegen. Es kann das Gewicht in Bezug auf einen numerischen Wert wie 100, 200, 300 usw. bestimmen. Der höhere Wert gibt eine mutigere/dickere Schriftart an, während der kleinere Wert eine dünnere Schriftart darstellt.

Das folgende Code-Stück setzt das Schriftgewicht für die

Element verwenden "mutiger" Wert:

Html

CSS -Schriftarten

Erster Paragraph

Zweiter Absatz

CSS

P
Schriftgewicht: mutiger;

Der obige Snippet erzeugt die folgende Ausgabe:

Schriftkutschkutschmobilie in CSS

CSS liefert eine Kurzeigenschaft für alle oben genannten Eigenschaften. Mit Shorthand "Schriftart" Eigenschaft Wir können den Schriftart, die Familie, die Variante usw. einstellen. in einer einzigen Linie.

Das untergegebene Beispiel zeigt, wie man die Eigenschaft von Schriftarten in CSS verwendet:

Html

CSS -Schriftarten

Erster Paragraph

Zweiter Absatz

CSS

P
Schriftart: BOLD 30PX -Kursiv;

Das übergegebene Snippet gibt die Schriftgewicht, die Schriftgröße und die Schriftfamilie in einer Erklärung unter Verwendung einer Schriftkutsch-Eigenschaft an:

Die obige Ausgabe überprüft, dass die Kurzeigeneigenschaft erfolgreich das Schriftgewicht, die Größe und die Familie für die festlegen

Element.

Abschluss

Die Schriftfamilien bestimmen die Form von Schriftarten, während die Eigenschaften im Schriftarten, Schriftgewicht, Schriftgröße und Schriftarten im Bereich der Schrift im Schriftart, Gewicht, Größe und Kleinkapsel des Effekts der Schriftarten bestimmen. Alle diese Funktionen können an den Schriftarten in einer einzigen Deklaration unter Verwendung von Kurzschrift „Schriftart“ durchgeführt werden.

Dieses Schreiben bietet einen umfassenden Überblick über die CSS-Schriftarten, generische Schriftfamilien und wie man den Stil der Schriftart festlegt.