Det tillgängliga sättet
Din bästa satsning är att titta på Ethans 5-minuters video och sedan referera till detta:
Cross-browser-sättet (extra markering)
Slå bara in det första tecknet i stycket i ett intervall och rikta sedan in intervallet med CSS och stil bort.
L orem ipsum dolor sit amet, consectetur adipiscing elit.
.firstcharacter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )CSS3-sättet (ingen extra markering)
Rikta in det första tecknet i första stycket med hjälp av pseudoklassväljare. Ingen extra markering behövs, men inget stöd för IE <9.
Just a normal sentence.
p:first-child:first-letter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )det initial-lettersätt
Webbläsarstödet för initial-letterär ganska sparsamt när detta skrivs, men det kan användas för att beräkna antalet rader som den tappade bokstaven ska uppta och teckenstorleken istället för att göra det själv.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| Nej | Nej | Nej | Nej | TP * |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nej | Nej | Nej | 14,0-14,4 * |