Einführung in CSS-Schrifteigenschaften
CSS-Schrifteigenschaften bietet eine Übersicht über die Schrifteigenschaften von CSS. Cascading Style Sheets, besser bekannt als CSS, ist eine einfache Designsprache, mit der das Erscheinungsbild von Webseiten vereinfacht werden soll. CSS befasst sich mit dem Erscheinungsbild und dem Erleben eines Teils einer Webseite. Mithilfe von CSS können Sie die Farbe des Texts, den Schriftstil, den Abstand zwischen den Absätzen, die Größe der Spalten sowie die verwendeten Hintergrundbilder oder Farben, Layoutstile und Darstellungsvarianten steuern mehrere Geräte sowie Bildschirmgrößen neben einer Reihe von verschiedenen anderen Effekten. CSS ist einfach zu verstehen, bietet jedoch eine effektive Kontrolle über die Demonstration des HTML-Dokuments. In den meisten Fällen wird CSS in der Regel mit HTML-Markup-Sprachen oder einfach mit XHTML kombiniert.
- CSS bezieht sich auf Cascading Style Sheets.
- CSS legt fest, wie HTML-Elemente auf dem Bildschirm und in Papierform angezeigt werden sollen und auch aus Medien bestehen sollen.
- CSS spart viel Arbeit. Es kann das Layout mehrerer Webseiten gleichzeitig steuern.
- Externe Stylesheets werden in CSS-Dateien gespeichert.
Erklären Sie verschiedene CSS-Schrifteigenschaften
Unten sind die verschiedenen CSS-Schrifteigenschaften aufgeführt:
Schriftensammlung : In CSS können Sie die Schriftart auswählen, die Sie für den Text in einem bestimmten Element verwenden möchten, indem Sie die Schriftfamilieneigenschaft in einer Stilregel festlegen. Bevor wir uns jedoch mit den Einzelheiten der Schriftfamilie befassen, müssen wir uns damit befassen Verwendung von Schriftnamen, da wir beim Erstellen einer Webseite nicht immer wissen, was unser Benutzer zum Anzeigen der Webseite verwendet.
Definieren Sie die fünf Schriftkategorien in Standards CSS
- Die erste dieser Kategorien sind die Kategorien von Serifenschriften. Ein Beispiel für eine bestimmte Schriftart, die in diese Kategorie passt, sind Times oder Times New Roman sowie Baskerville, Century und Schoolbook
- Hierbei handelt es sich um bestimmte Schriftnamen wie Baskerville, Century und Schoolbook. Dies sind die Schriftartnamen, die möglicherweise in einer Dropdown-Liste angezeigt werden, wenn Sie eine Schriftart in einem Textverarbeitungsprogramm auswählen, da das Textverarbeitungsprogramm genau weiß, was auf Ihrem Computer installiert ist. Für CSS würden all diese Schriftarten jedoch in die Kategorie der Serifenschriftarten fallen.
- Es gibt auch eine Reihe von serifenlosen Schriftarten und eine beliebte Schriftart, die in diese Kategorie fällt, ist Arial. Falls Sie es nicht wussten, Serife, so gibt es kleine Linien am Ende eines Briefes, die die Buchstaben ein wenig schick und verschönert aussehen lassen. Sie können den Unterschied in den R-Buchstaben unten sehen.
- Das R auf der linken Seite ist ein Arial, das buchstäblich ohne Verzierungen serifenlos ist, während das R auf der rechten Seite Times New Roman ist und hier und da ein paar zusätzliche kleine Striche enthält. Im Allgemeinen sind die serifenlosen Schriftarten auf einem LCD- und LED-Display besser lesbar.
- Es gibt auch Kategorien für kursive Schriftarten, die handgeschriebenen Buchstaben ähneln, und für Fantasy-Schriftarten, die wie alles aussehen können. Die meisten Designs werden diese Schriftarten jedoch nicht in großem Umfang nutzen, da sie schwer lesbar und auch ein wenig lesbar sein können unberechenbar.
- Schließlich gibt es eine Kategorie für monospaced Schriftarten. Dies sind die Schriftarten, die jedem Buchstaben den gleichen Abstand geben. Dies ist wahrscheinlich die Schriftart, die Sie in Ihrem Texteditor zum Erstellen von CSS verwenden möchten, und auch die Schriftart, die Sie auf einer Webseite zum Anzeigen von Code in einer verwenden möchten Website.
Ergebnisse im Webbrowser:
Ausgabe:
Ergebnisse im Webbrowser:
Ausgabe:
Ergebnisse im Webbrowser:
Ausgabe:
Ergebnisse im Webbrowser:
Ausgabe:
Ergebnisse im Webbrowser:
Ausgabe:
Schriftfamilien
Unter der Erklärung sind die Schriftfamilien aufgeführt:
- Viele CSS-Entwürfe setzen die Schriftfamilieneigenschaft auf den Namen einer bestimmten Schrift wie Arial. Es besteht jedoch immer die Möglichkeit, dass die gewünschte Schriftart wie Arial auf dem System eines bestimmten Benutzers nicht verfügbar ist. Dies ist einer der Gründe, warum Sie in einer durch Kommas getrennten Liste so viele Schriftarten angeben können, wie Sie möchten. Der Browser verwendet dann die erste passende.
Gemäß dem obigen Screenshot haben wir die 1. Wahl, eine 2. Wahl, und wenn keine dieser Schriften verfügbar ist, greifen wir auf die generische serifenlose Schrift zurück, da selbst dann, wenn der Browser keine der anderen Schriften hat, die er bereitstellen muss eine Standardschriftart für diese Kategorie. Dies wirft natürlich die Frage auf, welche Schriftarten für das Webdesign sicher sind. Im Allgemeinen können Sie mit Arial, Verdana, Times und Courier nichts falsch machen, aber wir haben hier auch eine Liste anderer Schriftarten bereitgestellt, die häufig auf mehreren Plattformen verfügbar sind.
- Helvetica ist eine häufig verwendete Schriftart, die in vielen Stylesheets aufgeführt ist, aber Helvetica ist unter Windows nicht verfügbar. Windows bietet stattdessen Arial.
- Die Schriftfamilie ist eine jener Eigenschaften, die vererbt werden. Wenn wir es also auf der Body-Ebene setzen, werden die Absätze, Divs und Anker, die sich in diesem Body befinden, diese Schriftfamilie standardmäßig übernehmen, es sei denn, wir überschreiben sie. Zum Beispiel erbt dieser Header hier, dieses h1-Tag, die Schriftfamilie vom Hauptteil, aber das muss nicht so sein.
Ausgabe:
Wir können sagen, dass für das h1 die Schriftfamilie Times New Roman, Serif sein sollte und wenn die Webseiten aktualisiert werden, hat sich die Änderung ausgewirkt.
Schriftgröße und Schriftstile
Nachfolgend finden Sie detaillierte Informationen zu Schriftgröße und Schriftstilen:
- Ein weiteres Merkmal von Schriftarten, die Sie steuern möchten, ist die Größe. Wenn Sie die Größe festlegen, müssen Sie zunächst zwischen absoluten und relativen Einheiten wählen.
- Absolute Größen werden üblicherweise in Pixel angegeben, und Pixel geben Ihnen eine sehr genaue Kontrolle über die Schriftgröße.
- Relative Einheiten wie Prozentsätze oder Schlüsselwörter, die größer oder kleiner oder kleiner sind, ermöglichen es Ihnen, eine Schriftgröße basierend auf einer bestimmten Grundlinie festzulegen, sodass 2em doppelt so groß ist wie die Grundlinie und 0, 8em 80% der Grundlinie entspricht. Viele Leute verwenden heute ems für die relative Schriftgröße. Ein Grund dafür ist, dass ein Benutzer den Text mithilfe seines Browsers in relativen Größen skalieren kann. Dies ist möglicherweise wünschenswert, da der Text für ihn schwer erkennbar ist. Relative Größen ermöglichen es, dass dies funktioniert.
Ergebnisse im Webbrowser:
Ausgabe:
- Einige der anderen Eigenschaften einer Schriftart, die Sie festlegen können, sind der Schriftstil, um Kursivschrift zu erzwingen, oder die Schriftstärke, um eine Schriftart fett zu machen. Und die Eigenschaft font-variant bringt eine Schriftart mit, die nur Großbuchstaben verwendet.
Ergebnisse im Webbrowser:
Ausgabe:
- Das erste, was wir tun wollen, ist, das Element h1 ein wenig zu betonen. Es muss ein h1-Element sein, da es der primäre Header für diese Seite ist, aber aus unserer Sicht ein bisschen zu groß. Also lass mich die Schriftgröße auf 1.2ems setzen. Das wird das ein wenig reduzieren, da ein h1-Tag in der Regel deutlich über 1.2ems liegt. Das nächste Problem, das wir ansprechen möchten, ist der hier aufgeführte Code. Wir möchten, dass dies eine Monospace-Schrift ist, und es gibt einige verschiedene Möglichkeiten, dies zu erreichen. Für Code wie unten.
Ergebnisse im Webbrowser:
Ausgabe:
Ergebnisse im Webbrowser:
Ausgabe:
Hier möchten wir Pre-Tag verwenden, was bedeutet, dass es sich um vorformatierten Text handelt. Bitte versuchen Sie nicht, ihn zu manipulieren.
Ergebnisse im Webbrowser:
Ausgabe:
Es handelt sich um Kurzformateigenschaften des Schriftstils. Wie Kursivschrift, Schriftgröße 0.9em und Schriftfamilienserif;
Ergebnisse im Webbrowser:
Ausgabe:
Fazit
So legen Sie Zeichensätze mit CSS fest und ermitteln den Unterschied zwischen einem bestimmten Zeichensatz wie Arial und den allgemeinen Kategorien von Webzeichensätzen wie Serif und Sans-Serif. Wir verwalten auch die Schriftgröße und die Vor- und Nachteile der relativen Größen im Vergleich zu den absoluten Größen. Schließlich verwenden wir die Schrifteigenschaften und lernen, Schriften mit der Schriftfamilie zu laden.
Empfohlene Artikel
Dies war eine Anleitung zu den CSS-Schrifteigenschaften. Hier haben wir verschiedene CSS-Schrifteigenschaften und fünf Schriftenkategorien in Standard-CSS mit Browserergebnissen und -ausgaben besprochen. Sie können auch unseren anderen empfohlenen Artikel durchgehen, um mehr zu erfahren.
- Was ist CSS?
- Einführung in CSS
- Karriere in CSS
- Vorteile von CSS