La font-variantpropiedad le permite cambiar el texto de destino a versalitas. Esta propiedad se ha ampliado en CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Antes de CSS3, esta propiedad aceptaba uno de dos valores posibles: normal(cómo se representa el texto de forma predeterminada) y small-caps.
Un valor de small-capsrepresentará el texto en letras mayúsculas que son más pequeñas que las letras mayúsculas normales. Esto no anula el conjunto de mayúsculas en el contenido, dentro del marcado. Por ejemplo:
En la demostración anterior, ambos párrafos están configurados en font-variant: small-caps. El primer párrafo tiene solo la primera letra en mayúscula en el marcado, por lo que aparece como se esperaba (primera letra en mayúscula, resto en minúsculas).
La segunda línea está escrita en mayúsculas en el marcado, que anula el small-capsvalor y establece todo en mayúsculas normales.
Llevando esto más allá, si estos párrafos se establecen en font-variant: small-capsy text-transform: lowercase, aparecerán en minúsculas. Del mismo modo, si estos párrafos se establecen en font-variant: small-capsy text-transform: uppercase, aparecerán en mayúsculas normales.
font-variantse puede incluir como parte de una fontdeclaración abreviada.
Nuevas adiciones en CSS3
En CSS 3, font-variantse convierte en una forma rápida y puede aceptar múltiples valores, entre ellos all-small-caps, petite-caps, all-petite-caps, titling-caps, y unicase, entre otros.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Trabajos | Trabajos | Trabajos | Trabajos | Trabajos | Trabajos | Trabajos |
Los nuevos valores agregados en CSS3 no son compatibles con el navegador, por lo que la tabla anterior representa la compatibilidad con un valor de small-caps.
En IE6 / 7, la configuración font-variant: small-capshará que cualquier texto configurado en text-transform: uppercaseo text-transform: lowercaseaparezca como text-transform: none.