Właściwość CSS initial-letter znacznie ułatwi Ci pracę.
Obsługa przeglądarek
Gdzie możesz wypróbować initial-letter? Jest ona dostępna w Safari i Chrome 110. W Safari usługa musi mieć prefiks -webkit-. W Firefoksie jest otwarte zgłoszenie dotyczące wdrożenia tej funkcji.
Przetestuj obsługę initial-letter:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Obecne rozwiązania
Jak dziś nadać styl drop cap w CSS?
Pseudoelement ::first-letter pozwala nam dotrzeć do pewnego miejsca.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Jednak podczas obliczania rozmiaru pierwszej litery prawdopodobnie będziesz musiał użyć właściwości takich jak „float”.
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, mogłoby nieco złagodzić te problemy. Te funkcje mają jednak ograniczone wsparcie (lh jest obecnie obsługiwana 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 initial-letter
Właściwość initial-letter zapewnia większą kontrolę nad tym typem stylizacji. Przyjmuje 2 wartości rozdzielone spacją:
p::first-letter {
initial-letter: 3.5 3;
}
- Pierwszy argument określa rozmiar litery i liczbę wierszy, które zajmie. Litera zostanie powiększona, zachowując współczynnik proporcji. Nie możesz użyć wartości ujemnej, ale możesz użyć wartości dziesiętnych.
- Drugi argument definiuje Sink. Można to traktować jako przesunięcie, w którym będzie znajdować się litera. Druga wartość jest opcjonalna i nie może być ujemna. Jeśli nie jest obecna, przyjmuje się wartość rozmiaru litery zaokrągloną w dół do najbliższej liczby całkowitej. Jest to równoznaczne z używaniem słowa kluczowego „drop”. SINK akceptuje też inną wartość słowa kluczowego, „raise”, która jest równoważna wartości 1.
W tym demonstracyjnym pliku możesz zmienić wartości, aby zobaczyć, jak wpływa to na styl czcionki z wielkimi literami.
Połączenie z ::first-line może wyglądać tak
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ż border. Zwróć uwagę, że w tym przykładzie użyto słowa kluczowego „drop”, które w przypadku pominięcia byłoby domyślne i równałoby 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;
}
Możesz dodać 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;
}
Masz wiele możliwości.
I to wszystko. Dzięki initial-letter możesz teraz lepiej kontrolować styl inicjałów. Czy możesz dodać do swojej typografii litery z wysoką podstawą? Jak można je stylizować? Powiedz nam o tym!