Schriftgröße in CSS mit Schrägstrich

132

Was bedeutet der Schrägstrich hier:

font: 100%/120%;

html css size

— Alex
quelle

font-sizeakzeptiert den Schrägstrich nicht. Die richtige Eigenschaft ist font.

— BoltClock

wie wäre es damit? Hintergrund: "rgba (0, 0, 0, 0) keine Bildlauf wiederholen 0% 0% / Auto Padding-Box Border-Box"

— jerinho.com

195

Dies legt tatsächlich zwei Eigenschaften fest und entspricht:

font-size: 100%;
line-height: 120%;

Um die offizielle Dokumentation zu zitieren :

Die Syntax dieser Eigenschaft basiert auf einer herkömmlichen typografischen Kurzschreibweise zum Festlegen mehrerer Eigenschaften für Schriftarten.

Wie David M in den Kommentaren sagte, spiegelt es die Satztradition wider, Schriftgrößen als „ x pt auf y pt“ anzugeben , um die Glyphengröße auf der Zeilenhöhe zu bezeichnen.

Das Beispiel in Ihrer Frage ist jedoch tatsächlich falsch und wird vom Browser ignoriert: Sie können diese beiden Eigenschaften nur in der fontKurzschreibweise kombinieren , und Sie müssen mindestens sowohl die Schriftgröße als auch die Familie angeben. Einfach zu schreiben font: 100%/120%;ist daher nicht genug; Sie können jedoch einen generischen Familiennamen hinzufügen, um ihn gültig zu machen, z.

font: 100%/120% serif;

— Konrad Rudolph
quelle

Dies dient zum Spiegeln der alten Satzsyntax, bei der die Schriftart beispielsweise "10pt auf 12pt" oder "10pt / 12pt" festgelegt ist.

— David M

Ich benutze das eigentlich ziemlich oft. Der Designer, mit dem ich zusammenarbeite, bezeichnet die Größe immer als "14 über 22". Ich habe es eines Tages versehentlich reingelegt und war überrascht / zufrieden, als es funktionierte.

— Dylan Lukes

Ein Quickie: Erfordert dieses Format auch nicht die Angabe der Schriftfamilie? Meine Browser ignorieren diese Eigenschaft: font: 12px / 16px; aber akzeptieren Sie dies: Schriftart: 12px / 16px serifenlos; Dieses Verhalten ist auch hier

— Kumarharsh

@Harsh Ja, eine Familie (zusammen mit einer Größe) ist für die fontKurzschrift-Eigenschaft minimal erforderlich, wie Sie in der offiziellen Definition sehen können .

— Konrad Rudolph

Danke für die Klarstellung. Vielleicht können Sie die Antwort (oder die Frage) aktualisieren, da dies etwas irreführend ist, da ein gelegentlicher Leser davon ausgehen kann, dass nur eine SIZE / LINE_HEIGHT-Deklaration funktionieren würde.

— Kumarshar

Konrad hat diese, aber es gibt viele solche CSS-Kurzschrift- Eigenschaften, mit denen Sie Ihre Stylesheets kürzen können. Einige von ihnen sehen ein wenig kryptisch aus, wenn Sie sie nicht kennen.

— Bill die Eidechse
quelle

Die meisten Abkürzungen befassen sich jedoch mit verwandten Stileigenschaften (z border-*. B. ). David hat in den Kommentaren zu meiner Antwort eine gute Erklärung gegeben. Was kryptische Kurzschrift betrifft: sicherlich wahr, aber so verdammt nützlich und ziemlich leicht zu erlernen.

— Konrad Rudolph