Mit der CSS-Eigenschaft initial-letter wird dies viel einfacher.
Unterstützte Browser
Wo kannst du initial-letter ausprobieren? Sie ist in Safari und ab Chrome 110 verfügbar. In Safari benötigt das Attribut das Präfix -webkit-. Bei der Implementierung in Firefox gibt es ein offenes Problem.
Testen Sie den initial-letter-Support mit:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Aktuelle Lösungen
Wie könnten Sie heute ein Drop-Cap in CSS gestalten?
Das Pseudoelement ::first-letter bringt uns dazu.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Aber dann müssen Sie wahrscheinlich nach Properties wie „float“ bei der Berechnung der Größe für den ersten Buchstaben.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
Die Einführung neuer CSS-Einheiten wie lh könnte einige dieser Probleme lösen. Diese werden aber auch nur eingeschränkt unterstützt (lh wird derzeit nur in Chrome unterstützt).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
Jetzt neu: Anfangsbuchstabe
Mit der Eigenschaft initial-letter können Sie den Stil des Drop-Cap-Bereichs genauer steuern. Es werden zwei Werte verwendet, die durch Leerzeichen getrennt sind:
p::first-letter {
initial-letter: 3.5 3;
}
- Das erste Argument definiert die Größe des Buchstabens und die Anzahl der Zeilen, die er belegt. Der Buchstabe wird unter Beibehaltung des Seitenverhältnisses hochskaliert. Negative Werte sind nicht zulässig, Sie können aber Dezimalwerte verwenden.
- Das zweite Argument definiert den Buchstaben Senke. Dies kann man sich als die Abweichung für die Position des Buchstabens vorstellen. Der zweite Wert ist optional und darf nicht negativ sein. Ist kein Wert vorhanden, wird der Wert für die Buchstabengröße auf die nächste ganze Zahl gerundet. Dies entspricht der Verwendung des Keywords „drop“. Die Senke akzeptiert auch einen weiteren Keyword-Wert, „raise“, der einer Senke von 1 entspricht.
Sehen Sie sich diese Demo an, in der Sie die Werte ändern können, um zu sehen, wie sich dies auf den Stil des Drop-Cap-Effekts auswirkt.
Wenn Sie es mit ::first-line kombinieren, könnten Sie etwa Folgendes erhalten:
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
Oder vergeben Sie stattdessen eine border. Im folgenden Beispiel wird das Keyword „drop“ verwendet, das bei Nichtangabe als Standard verwendet wird und 3 entspricht:
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
Fügen Sie vielleicht eine background oder box-shadow hinzu:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
Oder kürzen Sie den Hintergrund auf den Text:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
Sie haben viele Möglichkeiten!
Und das wars auch schon. Mit initial-letter kannst du das Design des Drop-Cap-Effekts genauer steuern. Würden Sie Ihrer Typografie Dropdown-Kappen hinzufügen? Wie könnten Sie sie gestalten? Schreiben Sie uns!