Znacznie to ułatwia właściwość CSS initial-letter.
Obsługiwane przeglądarki
Gdzie możesz wypróbować usługę initial-letter? Jest dostępna w Safari i Chrome od wersji 110. W Safari właściwość musi zawierać prefiks -webkit-. Występuje otwarty problem, który można było zaimplementować w przeglądarce Firefox.
Przetestuj usługę initial-letter za pomocą:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Obecne rozwiązania
Jak możesz dziś określić styl ograniczenia w CSS?
Pseudoelement ::first-letter pomaga nam w tym wszystkim.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Przy obliczaniu rozmiaru pierwszej litery prawdopodobnie musisz sięgnąć po właściwości takie jak „liczba zmiennoprzecinkowa”.
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. Są one jednak obsługiwane w ograniczonym zakresie (lh są obecnie obsługiwane 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 inicjał
Właściwość initial-letter zapewnia dokładniejszą kontrolę nad stylem ograniczania liczby wyświetleń. Ma ona 2 wartości rozdzielone spacjami:
p::first-letter {
initial-letter: 3.5 3;
}
- Pierwszy argument określa rozmiar litery i liczbę jej wierszy. Litera się powiększy, zachowując proporcje. Nie możesz używać wartości ujemnych, ale możesz używać ułamków dziesiętnych.
- Drugi argument określa ujście litery. Można ją określić jako przesunięcie określające miejsce, w którym znajduje się litera. Druga wartość jest opcjonalna i nie może być ujemna. Jeśli ten parametr nie jest podany, przyjmuje się wartość odpowiadającą rozmiarowi litery zmniejszonej do najbliższej liczby całkowitej. Jest to odpowiednik słowa kluczowego „upuść”. Zlew akceptuje też inną wartość słowa kluczowego: „wznieś”, która odpowiada ujściem 1.
Zapoznaj się z prezentacją, w której możesz zmieniać wartości, aby zobaczyć, jak wpłynie to na styl nakładki.
Po połączeniu go z polem ::first-line uzyskasz wynik podobny do tego:
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;
}
Albo border. Zwróć uwagę, jak w przykładzie poniżej użyto słowa kluczowego „drop”, które byłoby domyślnym słowem kluczowym, jeśli zostanie pominięte i równa 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 nami wiele możliwości.
Zyskaj jeszcze większą kontrolę nad stylizacją czapek w initial-letter. Czy oznaczysz typografię jako wielkie litery? Jak możesz je stylizować? Prosimy o informacje.