La font-optical-sizingpropiedad CSS permite al navegador ajustar el contorno de los glifos de fuente para hacerlos más legibles en diferentes tamaños. Por ejemplo, el texto más pequeño puede tener un contorno más grueso para aumentar su contraste. Por otro lado, el texto más grande puede tener algo más "delicado" para citar la especificación.
.element ( font-optical-sizing: none; )¿Los glifos tienen contornos?
¡Ellas hacen! De hecho, todos los glifos los tienen y se escalan con el tamaño de la fuente. El problema es que un contorno súper delgado con un tamaño de fuente pequeño puede no proporcionar suficiente contraste para una mejor legibilidad; de manera similar, los contornos más gruesos en tamaños más grandes pueden tener demasiado peso y contraste. font-optical-sizingintenta corregir eso permitiendo que el navegador juegue con el contorno para que se lea mejor a diferentes escalas. El resultado será un texto más nítido y longitudes de texto más estrechas o más anchas, según el tamaño de la fuente.
Esto solo funciona en fuentes que admiten el tamaño óptico
Y las fuentes que admiten el tamaño óptico son fuentes variables , incluida Roboto Delta, una versión variable del clásico Roboto de Google. Otra fuente de apoyo es Amstelvar. Type Network mantiene ambas fuentes.
Incluso si una fuente es variable, debe admitir explícitamente el tamaño óptico como característica.
Otra forma de cambiar el tamaño de las fuentes de forma óptica
La font-optical-sizingpropiedad es la forma más eficaz de dimensionar ópticamente una fuente que la admita. Otra forma es usar la font-variation-settingspropiedad, que le permite controlar el tamaño óptico con opsz, que es la palabra clave para el tamaño óptico en fuentes variables que lo admiten.
Tenga en cuenta que el uso font-variation-settingsrequiere que configure el opszde acuerdo con el tamaño de fuente para que todo se adapte correctamente.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Sintaxis
font-optical-sizing: auto | none;- Inicial:
auto - Se aplica a: todos los elementos
- Heredado: si
- Valor calculado: palabra clave especificada
- Tipo de animación: discreto
Valores
auto: Este es el valor predeterminado. Permite a los navegadores optimizar el texto en diferentes tamaños de fuente para mayor legibilidad.none: Esto evita que los navegadores modifiquen el texto.
La propiedad también acepta valores de palabras clave a nivel mundial, entre ellos inherit, initialy unset.
Manifestación
Soporte de navegador
| ES DECIR | Borde | Firefox | Cromo | Safari | Ópera |
|---|---|---|---|---|---|
| No | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Navegador de Android | Safari de iOS | mini Opera |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Todos |
Otras lecturas
- Módulo de fuentes CSS, nivel 4 (borrador del editor)
- Documentación MDN
- Fuentes variables: tamaño óptico, ejes personalizados y otras curiosidades (tipografía web responsiva)