Font-variant-numeric - Trucos CSS

La font-variant-numericpropiedad en CSS es compatible con el formato de fuente OpenType al especificar qué glifos numéricos usar en una clase, incluidas variaciones para fracciones, marcadores ordinales y variaciones de estilo, entre otros.

Un poco de contexto

Tendemos a pensar en los números como un glifo estático. Imprime y así es. Sin embargo, los números se parecen mucho más a las letras del alfabeto en el sentido de que pueden tener variantes que, según el contexto, hacen que valga la pena modificar el estilo. Estamos hablando de cosas como fracciones (por ejemplo, 1/4), ordinales (por ejemplo, 1º) e incluso el equivalente de números en mayúsculas y minúsculas. Sin embargo, a diferencia de las letras, estas variaciones no cambian el significado del contenido, aunque brindan un contexto adicional o tienen un impacto en la legibilidad.

El problema con esta propiedad es que fue diseñado para funcionar con fuentes habilitadas para OpenType, un formato de fuente nuevo pero de rápido desarrollo que proporciona un conjunto más extenso de glifos que se pueden usar en diferentes contextos. Es posible que a menudo escuche que se refieren a OpenType como fuentes variables y eso se debe a que contienen una mayor variedad de caracteres que las hacen más flexibles para una variedad de usos. ¡Variaciones para todas las cosas!

El problema es que la disponibilidad de fuentes que pueden aprovechar al máximo font-varianty font-variant-numerices limitada. Hay un número creciente de fuentes compatibles con OpenType, pero hay un subconjunto mucho más pequeño de opciones que hacen uso de todas las funciones que font-variant-numericofrecen y, a menudo, son premium y caras. Richard Butler lo resume muy bien:

Tenemos a nuestra disposición números en 'mayúsculas' llamados numerales de revestimiento o de título, y números en 'minúsculas' llamados numerales de estilo antiguo o de texto ... También se da el caso de que la gran mayoría de fuentes no son modernas ni profesionales, si moderno significa OpenType- Medios habilitados y profesionales diseñados con ambos conjuntos de numerales.

El mayor problema que suele preocuparnos cuando se trata de propiedades CSS es la compatibilidad con el navegador, pero esta propiedad y todas las demás relacionadas font-varianttambién están a merced de los diseñadores de fuentes para brindar soporte completo a la mesa.

Eso es un fastidio, pero estamos empezando a ver aparecer fuentes más "modernas" y "profesionales", incluso en el momento de escribir este artículo. Adobe TypeKit anunció que está trabajando para admitir las funciones de OpenType y se rumorea que Google Fonts también está a bordo ahora que Chrome 62 las admite.

Uso básico

Este es el uso más básico de la propiedad:

.fraction ( font-variant-numeric: diagonal-fractions; )

Los navegadores más antiguos no reconocerán eso, pero aceptan font-feature-settingsque desbloquean las mismas funciones con diferentes valores. Podemos emparejar las dos propiedades para un soporte más profundo:

.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )

O bien, podemos adaptar esto para detectar la compatibilidad con el navegador utilizando de @supportsmodo que la nueva propiedad solo se sirva a los navegadores compatibles:

.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )

Valores

La font-variant-numericpropiedad acepta los siguientes valores. El font-feature-settingsvalor correspondiente se anota como referencia.

Valores generales

Valor	Descripción	Configuración de funciones
normal	Ninguna de las funciones que se enumeran a continuación está habilitada.	N / A
ordinal	Aplica letras para representar el orden numérico, normalmente en forma de superíndice.	ordn
slashed-zero	Muestra una forma alternativa de cero con una línea diagonal que lo atraviesa.	zero

Valores numéricos de cifras

Valor	Descripción	Configuración de funciones
lining-nums	Las líneas se numeran verticalmente para que se adhieran a la misma altura y estén alineadas en el mismo plano.	lnum
oldstyle-nums	Permite una alineación vertical alternativa donde los números no siempre se muestran de manera uniforme en la misma línea de base.	onum

Valores numéricos de fracciones

Valor	Descripción	Configuración de funciones
diagonal-fractions	Muestra fracciones en un formato más pequeño donde el numerador (número superior) y el denominador (número inferior) están divididos por una barra diagonal.	frac
stacked-fractions	Muestra fracciones en un formato más pequeño donde el numerador y el denominador están apilados uno encima del otro y divididos por una línea horizontal.	afrc

Valores de espaciado numérico

Valor	Descripción	Configuración de funciones
proportional-nums	Permite que los números ocupen su propia cantidad de espacio que no son necesariamente iguales en ancho a otros números.	pnum
tabular-nums	Muestra números con el mismo tamaño, proporcional y espaciado para un formato limpio en contextos de datos tabulares.	tnum

La especificación incluye una nota especial sobre el uso de ordinalporque se parece al supelemento de superíndice pero está marcado de manera diferente.

Para superíndices:

sup ( font-variant-position: super; )

Two squared is 22

Para marcadores ordinales:

.ordinal ( font-variant-numeric: ordinal; )

1st

Soporte del navegador

La font-variant-numericpropiedad forma parte actualmente de la especificación de nivel 3 del módulo de fuentes CSS, que se encuentra en estado de recomendación candidata en el momento de escribir este artículo, lo que significa que puede cambiar en cualquier momento.

Escritorio

Cromo	Borde	Firefox	ES DECIR	Ópera	Safari
52	No	34	No	39	9.1

Firefox 24-34 (exclusivo) admite la propiedad detrás de la layout.css.font-features.enabledpreferencia cuando se establece en true.

Móvil

Navegador de Android	Chrome Android	Borde	Firefox	ES DECIR	Opera Android	Safari de iOS
52	52	No	34	No	39	sí