Den tilgjengelige måten
Det beste alternativet er å se Ethans 5-minutters video og deretter referere til dette:
Kryssleserveien (ekstra markering)
Bare pakk det første tegnet i avsnittet i et spenn, og mål deretter spennet med CSS og 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-måten (ingen ekstra markering)
Målrett mot første tegn i første avsnitt ved hjelp av pseudoklassevalg. Ingen ekstra markering nødvendig, men ingen IE <9-støtte.
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; )den initial-lettermåten
Nettleserstøtten for initial-letterer ganske sparsom i skrivende stund, men den kan brukes til å beregne antall linjer den drop capped letter skal oppta og skriftstørrelsen i stedet for å gjøre det på egen hånd.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| Nei | Nei | Nei | Nei | TP * |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nei | Nei | Nei | 14,0-14,4 * |