Die CSS-Property initial-letter macht das viel einfacher.
Unterstützte Browser
Wo kann ich initial-letter ausprobieren? Sie ist in Safari und ab Chrome 110 verfügbar. In Safari muss die Property das Präfix -webkit- haben. Es gibt ein offenes Problem, das die Implementierung in Firefox verhindert.
initial-letter-Support mit folgenden Tools testen:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Aktuelle Lösungen
Wie würden Sie heute einen Dropcap-Stil in CSS definieren?
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 Eigenschaften wie "float" greifen, während Sie die Größe für den ersten Buchstaben berechnen.
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 diese Probleme etwas abmildern. Auch diese werden jedoch 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 Property initial-letter können Sie das Design der Versalien 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 Briefes und wie viele Zeilen er einnimmt. Der Brief wird vergrößert, wobei das Seitenverhältnis beibehalten wird. Negative Werte sind nicht zulässig, aber Dezimalwerte sind erlaubt.
- Das zweite Argument definiert den Briefablauf. Das ist der Versatz für die Position des Buchstabens. Der zweite Wert ist optional und darf nicht negativ sein. Wenn kein Wert angegeben ist, wird der Wert für die Schriftgröße auf die nächste ganze Zahl abgerundet. Dies entspricht der Verwendung des Keywords „drop“. Die Senke akzeptiert auch einen weiteren Keyword-Wert, „raise“. Dieser Wert entspricht einer Senke von 1.
In dieser Demo können Sie die Werte ändern, um zu sehen, wie sich das auf den Stil der Initiale auswirkt.
Kombiniert mit ::first-line könnte das so aussehen:
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 Auslassung 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 einige 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 Sie schneiden den Hintergrund zu:
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;
}
Es gibt viele Möglichkeiten.
Und schon haben Sie mit initial-letter die Möglichkeit, das Design des Drop-Cap-Kapselns genauer zu steuern. Würden Sie Ihrer Typografie Initialen hinzufügen? Wie könnten Sie sie gestalten? Schreiben Sie uns!