El camino accesible
Su mejor opción es ver el video de 5 minutos de Ethan y luego hacer referencia a esto:
La forma de varios navegadores (marcado adicional)
Simplemente envuelva el primer carácter del párrafo en un intervalo, luego oriente el intervalo con CSS y elimine el 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; )La forma CSS3 (sin marcado adicional)
Apunte al primer carácter del primer párrafo usando selectores de pseudo clases. No se necesita marcado adicional, pero no es compatible con 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; )El initial-lettercamino
El soporte del navegador initial-letteres bastante escaso en el momento de escribir este artículo, pero se puede usar para calcular la cantidad de líneas que debe ocupar la letra en mayúscula y el tamaño de fuente en lugar de hacerlo por su cuenta.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| No | No | No | No | TP * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| No | No | No | 14,0-14,4 * |