Zadana postavka sistemskog fonta određenog operativnog sustava može poboljšati izvedbu jer preglednik ne mora preuzimati datoteke fontova, već koristi onu koju je već imao. To je istina za bilo koji font "siguran na mreži". Ljepota "sistemskih" fontova je u tome što se podudara s onim što koristi trenutni OS, tako da može biti ugodnog izgleda.
Koji su to sistemski fontovi? U vrijeme pisanja ovog članka, to se dijeli kako slijedi:
| OS | Verzija | Krstionica sustava |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Vidik | Korisničko sučelje Segoe |
| Windows | XP | Tahoma |
| Windows | 3.1 prema MENI | Microsoft bez serifa |
| Android | Sladoledni sendvič (4,0) + | Roboto |
| Android | Cupcake (1.5) do saća (3.2.6) | Droid Sans |
| Ubuntu | Sve verzije | Ubuntu |
Dođite već do isječka!
Razlog za predgovor je taj što pokazuje koliko duboko ćete se možda morati vratiti natrag da biste podržali sistemske fontove. Uz to, pomaže vam pokazati da s novim verzijama sustava dolaze novi fontovi, a time i mogućnost potrebe za ažuriranjem niza fontova.
Metoda 1: Sistemski fontovi na razini elementa
Chrome i Safari nedavno su isporučili "system-ui" koji je generička porodica fontova koja se može koristiti umjesto "-apple-system" i "BlinkMacSystemFont" u sljedećim primjerima. Savjet šeširu za informacije.Jedna od metoda primjene sistemskih fontova je izravnim pozivom na element pomoću font-familysvojstva.
GitHub koristi ovu metodu na svojoj web lokaciji, primjenjujući sistemske fontove na bodyelement:
/* 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"; )I Medium i WordPress administrator koriste sličan pristup, s malim odstupanjima, ponajviše podrškom za Oxygen Sans (stvoren za operativni sustav GNU + Linux) i Cantarell (stvoren za operativni sustav GNOME). Ovaj isječak također uklanja podršku za određene vrste emojija i simbola:
/* 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; )Napomena: Ovu metodu treba koristiti samo na font-familysvojstvu, umjesto u fontstenografiji. Booking.com je objavio temeljit opis upozorenja koja generira zbog toga što se čini da je vodeći font prefiks dobavljača.
2. metoda: Sistemski fontovi
Ograničenje prve metode je da morate pozvati čitav niz fontova svaki put kada se koristi na elementu i koji može postati glomazan i nadimati vaš kôd, ovisno o tome gdje i kako se koristi.
Jonathan Neal nudi alternativnu metodu gdje se sistemski fontovi deklariraju pomoću @font-face.
Prednost je u tome što fontove možete prijaviti jednom, a to onda postaje stvar koju možete na font-familysvojstvu umjesto dugog popisa fontova svaki put.
/* 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"; )Imajte na umu da Jonathanov cjeloviti primjer ilustrira sposobnost definiranja varijacija systemporodice fontova koja je definirana u gornjem isječku kako bi se uzeli u obzir kurziv, podebljanje i dodatne težine.
Povezano
- Fontovi specifični za OS u CSS-u - koji uključuju JavaScript metodu za testiranje korištenog fonta.
- Sistemski fontovi u SVG-u
- Implementacija sistemskih fontova na Booking.com - naučena lekcija - Booking.com dijeli kako su naučili koristeći sistemski font fontova u
fontskraćenici ne radi kako se očekivalo.