A maneira acessível
Sua melhor aposta é assistir ao vídeo de 5 minutos de Ethan e depois fazer referência a isto:
A maneira cross-browser (marcação extra)
Apenas envolva o primeiro caractere do parágrafo em uma extensão e, em seguida, direcione a extensão com CSS e estilo.
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; )A maneira CSS3 (sem marcação extra)
Almeje o primeiro caractere do primeiro parágrafo usando seletores de pseudo classe. Nenhuma marcação extra necessária, mas não há suporte para 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; )o initial-lettercaminho
O suporte do navegador para initial-letteré bastante esparso no momento em que este artigo foi escrito, mas pode ser usado para calcular o número de linhas que a letra capitular deve ocupar e o tamanho da fonte, em vez de fazer isso por conta própria.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| Não | Não | Não | Não | TP * |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Não | Não | Não | 14,0-14,4 * |