La font-systhesispropiedad en CSS proporciona al navegador instrucciones sobre cómo manejar las fuentes en negrita y cursiva cuando el especificado font-familyno las incluye.
Tomemos a Lato de Google Fonts como ejemplo. Dice que hay 10 variaciones diferentes de la fuente.
Cada una de esas variaciones de fuente es técnicamente un archivo de fuente diferente. Si queremos usar ciertos pesos y estilos, vincularíamos esos archivos para que el navegador tenga algo que cargar.
Pero no todas las fuentes incluyen archivos para manejar el peso y el estilo. En esos casos, el navegador "sintetizará" la apariencia en sí. El navegador hace lo mejor que puede, pero la imitación de negrita y estilo a veces hace que el texto sea menos legible; es decir, menos legible que una versión verdaderamente diseñada. En los casos más leves, podemos ver que los caracteres se superponen. En casos más graves, el texto es completamente ilegible o incluso puede cambiar el significado, como podría suceder con idiomas como el chino, el japonés, el coreano y otras escrituras logográficas.
Ahí es donde font-synthesisentra en juego. Controla qué tipos de letra puede sintetizar el navegador.
Sintaxis
.element ( font-synthesis: none | ( weight || style ); )En inglés simple, este medio font-synthesisaceptará:
- un valor de
none - ya sea
weightostyle - ambos
weightystyle
Vale la pena señalar que font-synthesisse considera una propiedad taquigráfica. Según la especificación, es una combinación de font-synthesis-weighty font-synthesis-styledonde ambos aceptan valores de autoo none. Dado que es posible obtener el mismo efecto usando la abreviatura, esa es probablemente la mejor manera de hacerlo.
Valores
none: No se pueden sintetizar ni negrita ni oblicuaweight: El navegador puede sintetizar la negritastyle: Oblique puede ser sintetizado por el navegador.
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */Uso
font-synthesisse puede utilizar con todos los elementos, incluyendo las ::first-lettery ::first-linepseudo-elementos.
Puede haber casos en los que no permita que el navegador sintetice negrita y oblicua en un idioma completo tenga sentido porque cualquiera de los dos puede ocultar caracteres. Aquí hay un ejemplo extraído de la especificación que deshabilita fuentes sintetizadas en negrita y oblicuas que contienen caracteres árabes:
/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )Manifestación
Soporte de navegador
En el momento de redactar este artículo, caniuse informa una cobertura global del 20,21% para la font-synthesispropiedad.
Escritorio
| ES DECIR | Borde | Firefox | Cromo | Safari | Ópera |
|---|---|---|---|---|---|
| No | No | 34+ | No | 9+ | No |
Móvil
| Safari de iOS | mini Opera | Navegador de Android | Chrome para Android | Firefox para Android |
|---|---|---|---|---|
| 9+ | Todos | No | No | 68 |
¿Quieres usarlo font-synthesisen el correo electrónico? Campaign Monitor informa que es compatible con los siguientes clientes:
- Apple Mail 10+
- Outlook para Mac
- Aplicación AOL Alto para iOS
- Correo iOS 10+
- gorrión
- G Suite
- Gmail
- Bandeja de entrada de Google
Más información
- Especificación de nivel 4 del módulo de fuentes CSS
- "Prueba CSS3:
font-synthesis" por Eric Meyer - "Cómo poner texto en cursiva" por Chris Coyier