font-feature-settings

Ejemplos

Ejemplo básico

Utiliza la utilidad font-features-[<value>] para habilitar funciones OpenType en fuentes que las soporten:

<p class="font-features-['smcp'] ...">Este texto usa versalitas.</p>

Habilitar múltiples funciones

Puedes habilitar múltiples funciones OpenType separándolas con comas:

<p class="font-features-['smcp','onum'] ...">Este texto usa versalitas y números de estilo antiguo.</p>

Usar variables CSS

Utiliza la sintaxis font-features-(<custom-property>) para aplicar configuraciones de funciones tipográficas desde una variable CSS:

<p class="font-features-(--my-features) ...">  <!-- ... --></p>

Diseño responsivo

Antepone a la utilidad font-feature-settings el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<p class="font-features-['tnum'] md:font-features-['smcp'] ...">  Lorem ipsum dolor sit amet...</p>

Obtén más información sobre el uso de variantes en la documentación de variantes.