Anfangsbuchstabe - CSS-Tricks

Anonim

initial-letter ist eine CSS-Eigenschaft, die den ersten Buchstaben des Elements auswählt, auf das es angewendet wird, und die Anzahl der Zeilen angibt, die der Buchstabe belegt.

Möglicherweise haben Sie so etwas auf Nachrichtenseiten gesehen, auf denen der erste Buchstabe eines führenden Absatzes größer ist als der Rest des Inhalts.

Die Website des New Yorker formuliert den Anfangsbuchstaben

Der Trick beim Stylen des ersten Inhaltsbuchstabens bestand darin, einen kleinen Hack zu machen, bei dem Sie den Buchstaben in a einwickeln und eine Klasse anwenden, um ihn zu stylen:

/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )


Once upon a time in a faraway land…

Das funktioniert, aber es ist mehr HTML-Markup als wir wollen und bricht unseren Inhalt auf. Außerdem ist es schmerzhaft, diese Klasse jedes Mal manuell anwenden zu müssen, wenn Sie sie verwenden möchten.

Das initial-letterkommt rein:

/* Style that first letter! */ .subhead ( initial-letter: 2; )


Once upon a time in a faraway land…

Das ist sauberer! Ein anderer Ansatz besteht darin, ihn ::first-letterstattdessen auf den Pseudo-Selektor anzuwenden :

/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )

Hast du das gesehen Die initial-letterEigenschaft berechnet automatisch sowohl die Schriftgröße als auch die Anzahl der Zeilen, die zum Erstellen unserer stilisierten Drop-Cap erforderlich sind! Möchten Sie, dass es genau 2, 3, 4 oder mehr Zeilen einnimmt? Sagen Sie der Eigenschaft und es wird das schwere Heben tun.

Ändern der Eigenschaft, um 1, 2 und 4 Zeilen zu belegen

Syntax und Werte

initial-letter: normal | ( );

initial-letter akzeptiert die folgenden Werte:

  • normal: Wendet keinen Skalierungseffekt auf den ersten Buchstaben an. Dies kann nützlich sein, um den Wert zurückzusetzen, bei dem einer von der Kaskade geerbt werden könnte.
  • : Wie viele Zeilen der Buchstabe belegen soll, wenn negative Werte nicht zulässig sind.
  • : Wie viele Zeilen sollte der Buchstabe versenken, wenn negative Werte nicht zulässig sind. Dies ist praktisch, wenn Sie den Buchstaben niedriger positionieren müssen, um knifflige Abstandsprobleme zu berücksichtigen. Wenn dies nicht angegeben ist, wird der Wert von verwendet

Beispiele

Drop Cap, Raised Cap und Block Cap mit Anfangsbuchstaben

Das Stylen des Anfangsbuchstabens kann verwendet werden, um einige ausgefallene typografische Entwurfsmethoden zu erzielen. Bitte beachten Sie, dass die folgenden Beispiele derzeit nur von Safari unterstützt werden.

Drop Caps sind wahrscheinlich der bekannteste Anwendungsfall:

Siehe den Anfangsbuchstaben des Stifts: Drop Cap von Geoff Graham (@geoffgraham) auf CodePen.

Erhöhte Kappen sind ein weiteres Beispiel:

Siehe den Anfangsbuchstaben des Stifts: Erhöhte Kappe von Geoff Graham (@geoffgraham) auf CodePen.

Block Caps erinnern an alte Märchen:

Siehe den Anfangsbuchstaben des Stifts: Block Cap von Geoff Graham (@geoffgraham) auf CodePen.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
Nein Nein Nein Nein TP *

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
Nein Nein Nein 14.0-14.4 *

verbunden

  • ::first-letter
  • Drop Caps Snippet

Mehr Informationen

  • CSS Inline Layout Module Level 3: Die offiziellen Spezifikationen
  • Jen Simmons Labs: Demos und Beispiele für Anwendungsfälle
  • Firefox-Ticket: Öffnen Sie das Ticket zur Unterstützung der Funktion
  • Internet Explorer Ticket: Öffnen Sie das Ticket zur Unterstützung der Funktion