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ś można sformatować tekst w ramce 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; } 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ć ten problem. 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 określa miejsce docelowe litery. 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 go 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!