La configuración predeterminada de la fuente del sistema de un sistema operativo en particular puede aumentar el rendimiento porque el navegador no tiene que descargar ningún archivo de fuente, está usando uno que ya tenía. Sin embargo, eso es cierto para cualquier fuente "segura para la web". La belleza de las fuentes del "sistema" es que coinciden con las que usa el sistema operativo actual, por lo que puede ser una apariencia cómoda.
¿Cuáles son esas fuentes del sistema? En el momento de escribir este artículo, se desglosa de la siguiente manera:
| SO | Versión | Fuente del sistema |
|---|---|---|
| Mac OS X | El Capitán | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Ventanas | Vista | IU de Segoe |
| Ventanas | XP | Tahoma |
| Ventanas | 3.1 para mí | Microsoft Sans Serif |
| Androide | Sándwich de helado (4.0) + | Roboto |
| Androide | Magdalena (1.5) a Panal (3.2.6) | Droid Sans |
| Ubuntu | Todas las versiones | Ubuntu |
¡Vaya al fragmento ya!
La razón del prefacio es que muestra qué tan profundo puede necesitar volver a las fuentes del sistema de soporte. Además, ayuda a mostrar que con las nuevas versiones del sistema, vienen nuevas fuentes y, por lo tanto, la posibilidad de tener que actualizar su pila de fuentes.
Método 1: fuentes del sistema a nivel de elemento
Chrome y Safari han enviado recientemente "system-ui", que es una familia de fuentes genéricas que se puede utilizar en lugar de "-apple-system" y "BlinkMacSystemFont" en los siguientes ejemplos. Gorra a JJ por la información.Un método para aplicar fuentes del sistema es llamarlas directamente a un elemento usando la font-familypropiedad.
GitHub usa este método en su sitio, aplicando fuentes del sistema en el bodyelemento:
/* System Fonts as used by GitHub */ body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )Tanto Medium como el administrador de WordPress utilizan un enfoque similar, con una ligera variación, sobre todo el soporte para Oxygen Sans (creado para el sistema operativo GNU + Linux) y Cantarell (creado para el sistema operativo GNOME). Este fragmento también deja de ser compatible con ciertos tipos de emoji y símbolos:
/* System Fonts as used by Medium and WordPress */ body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; )Nota: Este método solo debe usarse en la font-familypropiedad en lugar de la fontabreviatura. Booking.com publicó un artículo detallado sobre las advertencias que genera debido a que la fuente principal parece ser un prefijo de proveedor.
Método 2: pilas de fuentes del sistema
La limitación del primer método es que debe llamar a la pila completa de fuentes cada vez que se usa en un elemento y eso puede volverse engorroso e inflar su código, dependiendo de dónde y cómo se use.
Jonathan Neal ofrece un método alternativo donde las fuentes del sistema se declaran usando @font-face.
El beneficio aquí es que puede declarar las fuentes una vez y luego eso se convierte en lo que puede en la font-familypropiedad en lugar de la larga lista de fuentes cada vez.
/* Define the "system" font family */ @font-face ( font-family: system; font-style: normal; font-weight: 300; src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); ) /* Now, let's apply it on an element */ body ( font-family: "system"; )Tenga en cuenta que el ejemplo completo de Jonathan ilustra la capacidad de definir variaciones de la systemfamilia de fuentes que se definió en el fragmento anterior para tener en cuenta la cursiva, negrita y pesos adicionales.
Relacionado
- Fuentes específicas del sistema operativo en CSS, que incluye un método JavaScript para probar la fuente en uso.
- Fuentes del sistema en SVG
- Implementación de fuentes del sistema en Booking.com: una lección aprendida: Booking.com comparte cómo aprendieron que el uso de una pila de fuentes del sistema en la
fonttaquigrafía no funciona como se esperaba.