Defectarea fontului de sistem al unui anumit sistem de operare poate spori performanța, deoarece browserul nu trebuie să descarce niciun fișier de font, ci folosește unul pe care îl avea deja. Totuși, acest lucru este valabil pentru orice font „web safe”. Frumusețea fonturilor „sistem” este că se potrivește cu ceea ce folosește sistemul de operare actual, deci poate fi un aspect confortabil.
Care sunt aceste fonturi de sistem? În momentul redactării acestui document, se descompune după cum urmează:
| OS | Versiune | Font de sistem |
|---|---|---|
| Mac OS X | căpitanul | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Vista | Segoe UI |
| Windows | XP | Tahoma |
| Windows | 3.1 pentru mine | Microsoft Sans Serif |
| Android | Sandwich de înghețată (4.0) + | Roboto |
| Android | Cupcake (1.5) la Fagure de miere (3.2.6) | Droid Sans |
| Ubuntu | Toate versiunile | Ubuntu |
Accesați deja fragmentul!
Motivul prefaței este că arată cât de profund poate fi necesar să vă întoarceți pentru a accepta fonturile de sistem. În plus, vă ajută să arătați că, cu versiunile de sistem noi, apar fonturi noi și, prin urmare, posibilitatea de a fi nevoie să vă actualizați stiva de fonturi.
Metoda 1: Fonturi de sistem la nivel de element
Chrome și Safari au livrat recent „system-ui”, care este o familie de fonturi generică care poate fi utilizată în locul „-apple-system” și „BlinkMacSystemFont” în următoarele exemple. Sfat de pălărie către JJ pentru informații.O metodă de aplicare a fonturilor de sistem este apelarea directă a acestora către un element folosind font-familyproprietatea.
GitHub folosește această metodă pe site-ul lor, aplicând fonturi de sistem pe bodyelementul:
/* 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"; )Atât Medium, cât și administratorul WordPress folosesc o abordare similară, cu o ușoară variație, în special suport pentru Oxygen Sans (creat pentru sistemul de operare GNU + Linux) și Cantarell (creat pentru sistemul de operare GNOME). Acest fragment elimină, de asemenea, suportul pentru anumite tipuri de emoji și simboluri:
/* 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; )Notă: Această metodă ar trebui utilizată numai pe font-familyproprietate în loc de fontprescurtare. Booking.com a publicat o scriere detaliată a avertismentelor pe care le generează din cauza faptului că fontul principal pare a fi un prefix al furnizorului.
Metoda 2: Stive de fonturi de sistem
Limitarea primei metode este că trebuie să apelați teancul complet de fonturi de fiecare dată când este utilizat pe un element și care poate deveni greoi și vă poate umfla codul, în funcție de locul și modul în care este utilizat.
Jonathan Neal oferă o metodă alternativă în care fonturile de sistem sunt declarate folosind @font-face.
Avantajul este că puteți declara fonturile o dată și apoi acesta devine lucrul pe care îl puteți face în font-familyproprietate în loc de lista lungă de fonturi de fiecare dată.
/* 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"; )Rețineți că exemplul complet al lui Jonathan ilustrează capacitatea de a defini variații ale systemfamiliei de fonturi care a fost definită în fragmentul de mai sus pentru a ține cont de cursivele, boldurile și greutățile suplimentare.
Legate de
- Fonturi specifice sistemului de operare în CSS - care include o metodă JavaScript pentru testarea fontului utilizat.
- Fonturi de sistem în SVG
- Implementarea fonturilor de sistem pe Booking.com - O lecție învățată - Booking.com împărtășește modul în care au învățat folosind o stivă de fonturi de sistem pe
fontstenogramă nu funcționează așa cum era de așteptat.