Znacznie to ułatwia właściwość CSS initial-letter.
Obsługa przeglądarek
Gdzie możesz wypróbować initial-letter? Działa w Safari oraz w Chrome 110. W Safari usługa wymaga prefiksu -webkit-. Istnieje otwarty problem związany z jego wdrożeniem w Firefoksie.
Przetestuj, aby uzyskać pomoc dotyczącą initial-letter, korzystając z:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Bieżące rozwiązania
Jak możesz dzisiaj dodać styl limitu w CSS?
Pseudoelement ::first-letter pomaga nam w tym.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Jednak wtedy prawdopodobnie będziesz musiał sięgnąć po właściwości takie jak „float”, podczas obliczania rozmiaru pierwszej litery.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
Wprowadzenie nowych jednostek CSS, takich jak lh, może złagodzić ten problem. Te funkcje również są ograniczone (lh jest obecnie obsługiwany tylko w Chrome).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
Przedstawiamy literę początkową
Właściwość initial-letter daje większą kontrolę nad stylem tego ograniczenia. Przyjmuje 2 wartości oddzielone spacjami:
p::first-letter {
initial-letter: 3.5 3;
}
- Pierwszy argument określa rozmiar litery i liczbę wierszy, które będzie się na niej znajdować. Litera zostanie powiększona przy zachowaniu współczynnika proporcji. Nie możesz używać wartości ujemnych, ale możesz używać wartości dziesiętnych.
- Drugi argument określa ujście litery. Można to traktować jako przesunięcie miejsca, w którym będzie znajdować się litera. Druga wartość jest opcjonalna i nie może być ujemna. Jeśli go nie ma, przyjmuje wartość rozmiaru litery zaokrągloną w dół do najbliższej liczby całkowitej. Jest to odpowiednik słowa kluczowego „zrzuć”. To ujście może też przyjmować inną wartość słowa kluczowego – „raise”, która odpowiada ujściu 1.
Zapoznaj się z tą wersją demonstracyjną, w której możesz zmienić wartości, aby zobaczyć, jak wpływa to na styl ograniczeń.
Jeśli połączysz ten atrybut z parametrem ::first-line, możesz uzyskać coś takiego
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;
}
Możesz też dać border. Zwróć uwagę, że w tym przykładzie użyto słowa kluczowego „drop”, które w razie jego pominięcia jest domyślne, i równa się 3:
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;
}
Dodaj background lub box-shadow:
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;
}
Możesz też przyciąć tło do tekstu:
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;
}
Przed Tobą wiele możliwości!
I o to chodzi! Masz jeszcze większą kontrolę nad stylem nakładki w usłudze initial-letter. Czy warto dodać kapitaliki do typografii? Jak możesz je stylizować? Powiedz nam o tym!