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 Pseudo-Element ::first-letter ist ein guter Anfang.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Aber dann müssen Sie wahrscheinlich Eigenschaften wie „float“ verwenden, um eine Größe für diesen ersten Buchstaben zu 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: initial-letter
Mit der Property initial-letter können Sie das Design der Initiale genauer steuern. Es werden zwei durch Leerzeichen getrennte Werte verwendet:
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. Dies kann als Versatz für die Position des Buchstabens betrachtet werden. 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. Das entspricht der Verwendung des Keywords „drop“. Der Senkwert akzeptiert auch den Keyword-Wert „raise“, was einem Senkwert von 1 entspricht.
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 vielleicht geben Sie ihm 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;
}
Alternativ können Sie den Hintergrund auf den Text zuschneiden:
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.
So haben Sie mit initial-letter mehr Kontrolle über das Design Ihrer Initiale. Würden Sie Ihrer Typografie Initialen hinzufügen? Wie würden Sie sie stylen? Schreiben Sie uns!