Heim > Web-Frontend > CSS-Tutorial > Was bedeutet der Schrägstrich (/) in der CSS-Schriftkürzelnotation?

Was bedeutet der Schrägstrich (/) in der CSS-Schriftkürzelnotation?

Barbara Streisand
Freigeben: 2024-12-10 20:49:13
Original
856 Leute haben es durchsucht

What Does the Forward Slash (/) Mean in CSS Font Shorthand Notation?

Entschlüsselung der Schriftkürzel-Symbolik: Die Bedeutung des Schrägstrichs

Im Bereich CSS wirft die rätselhafte Schriftkürzel-Notation oft Fragen auf . Ein solches Rätsel betrifft die Rolle des Schrägstrichs (/). Dieser Artikel befasst sich mit der Semantik hinter diesem rätselhaften Trennzeichen.

Die Funktion des Schrägstrichs verstehen

Bedenken Sie die folgende CSS-Deklaration:

font: 12px/18px ...
Nach dem Login kopieren

Innerhalb dieser Zeile hat der 12px/18px-Teil eine wichtige Bedeutung. Es erläutert die folgenden zwei Aspekte der Typografie:

  • Schriftgröße (12 Pixel): Dieser Wert bestimmt die Größe der Schriftart, die zum Rendern von Text verwendet wird.
  • Zeilenhöhe (18 Pixel): Dieser Wert gibt den vertikalen Abstand zwischen Textzeilen an und gewährleistet so die Lesbarkeit und Ästhetik.

Theorie mit der Syntax verbinden

Die merkwürdige Syntax der Schriftkurzschrift ist eine Hommage an typografische Konventionen. Beim Druckdesign wird die Schriftgröße in Punkten ausgedrückt, während die Zeilenhöhe typischerweise als Vielfaches der Schriftgröße angegeben wird. Beispielsweise bedeutet eine Zeilenhöhe von 18 Pixel, dass der Text mit einer Schriftgröße von 12 Pixel und 50 % zusätzlichem vertikalen Abstand gerendert wird (18 Pixel = 12 Pixel, 50 % von 12 Pixel).

Kurzschrift in individuelle Eigenschaften übersetzen

In der Praxis lässt sich die Schriftart-Kurzschriftdeklaration nahtlos in die längere, detailliertere Deklaration übertragen Äquivalent:

font-size: 12px;
line-height: 18px;
Nach dem Login kopieren

Dies zeigt, dass die Kurzschreibweise lediglich eine kompakte Methode zum gleichzeitigen Definieren mehrerer Schrifteigenschaften bietet.

Relative Zeilenhöhen

Es ist wichtig zu beachten, dass die Zeilenhöhe auch als relativer Wert ausgedrückt werden kann, beispielsweise als Prozentsatz oder Em-Einheit. In solchen Szenarien erfolgt die Berechnung relativ zur Schriftgröße. Beispielsweise bedeutet eine Zeilenhöhe von 150 %, dass der vertikale Abstand zwischen den Zeilen das 1,5-fache der Schriftgröße beträgt (18 Pixel = 12 Pixel * 150 %).

Bezug auf die Standards

Weitere Informationen zu den Spezifikationen für die Schriftarteigenschaft in CSS finden Sie im Folgendes:

  • [W3C CSS2.1 Font Property Reference](https://www.w3.org/TR/CSS21/fonts.html)
  • [W3C CSS3 Fonts Module Referenz zu Schriftarteigenschaften](https://www.w3.org/TR/css3-fonts/#font-property)

Das obige ist der detaillierte Inhalt vonWas bedeutet der Schrägstrich (/) in der CSS-Schriftkürzelnotation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage