L'impostazione predefinita del font di sistema di un particolare sistema operativo può migliorare le prestazioni perché il browser non deve scaricare alcun file di font, ne utilizza uno che aveva già. Questo è vero per qualsiasi carattere "sicuro per il web", però. La bellezza dei caratteri di "sistema" è che corrispondono a ciò che il sistema operativo corrente utilizza, quindi può essere un aspetto confortevole.
Quali sono questi caratteri di sistema? Al momento della stesura di questo articolo, si suddivide come segue:
| OS | Versione | Carattere di sistema |
|---|---|---|
| Mac OS X | Il capitano | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| finestre | Vista | Segoe UI |
| finestre | XP | Tahoma |
| finestre | 3.1 a ME | Microsoft Sans Serif |
| Android | Ice Cream Sandwich (4.0) + | Roboto |
| Android | Cupcake (1.5) a Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Tutte le versioni | Ubuntu |
Vai allo snippet, già!
Il motivo della prefazione è che mostra quanto in profondità potresti dover tornare per supportare i caratteri di sistema. Inoltre, aiuta a dimostrare che con le nuove versioni di sistema, arrivano nuovi caratteri e quindi la possibilità di dover aggiornare lo stack di caratteri.
Metodo 1: caratteri di sistema a livello di elemento
Chrome e Safari hanno recentemente distribuito "system-ui" che è una famiglia di caratteri generica che può essere utilizzata al posto di "-apple-system" e "BlinkMacSystemFont" negli esempi seguenti. Punta di cappello a JJ per le informazioni.Un metodo per applicare i caratteri di sistema consiste nel chiamarli direttamente su un elemento utilizzando la font-familyproprietà.
GitHub utilizza questo metodo sul proprio sito, applicando i caratteri di sistema bodysull'elemento:
/* 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"; )Sia Medium che l'amministratore di WordPress utilizzano un approccio simile, con una leggera variazione, in particolare il supporto per Oxygen Sans (creato per il sistema operativo GNU + Linux) e Cantarell (creato per il sistema operativo GNOME). Questo snippet elimina anche il supporto per alcuni tipi di emoji e simboli:
/* 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: questo metodo deve essere utilizzato solo sulla font-familyproprietà anziché sulla fontscorciatoia. Booking.com ha pubblicato un articolo approfondito sugli avvisi che genera a causa del carattere principale che sembra essere un prefisso del fornitore.
Metodo 2: stack di font di sistema
La limitazione del primo metodo è che devi chiamare l'intero stack di caratteri ogni volta che viene utilizzato su un elemento e questo può diventare ingombrante e gonfiare il tuo codice, a seconda di dove e come viene utilizzato.
Jonathan Neal offre un metodo alternativo in cui i caratteri di sistema vengono dichiarati utilizzando @font-face.
Il vantaggio qui è che puoi dichiarare i caratteri una volta e poi ciò diventa ciò che puoi sulla font-familyproprietà invece del lungo elenco di caratteri ogni volta.
/* 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"; )Si noti che l'esempio completo di Jonathan illustra la capacità di definire variazioni della systemfamiglia di caratteri definita nello snippet sopra per tenere conto di corsivo, grassetto e pesi aggiuntivi.
Relazionato
- Caratteri specifici del sistema operativo in CSS - che include un metodo JavaScript per testare il carattere in uso.
- Caratteri di sistema in SVG
- L'implementazione dei caratteri di sistema su Booking.com - Una lezione imparata - Booking.com condivide come hanno imparato utilizzando uno stack di caratteri di sistema sulla
fontstenografia non funziona come previsto.