Egy adott operációs rendszer rendszer betűtípusának alapértelmezett beállítása növelheti a teljesítményt, mivel a böngészőnek nem kell betöltenie betűtípusfájlokat, hanem egy már meglévő fájlt használ. Ez minden „webbiztonságos” betűtípusra igaz. A „rendszer” betűtípusok szépsége, hogy megfelel a jelenlegi operációs rendszer által használtaknak, így kényelmes megjelenésű lehet.
Mik azok a rendszerfontok? Az írás idején a következőképpen bomlik le:
| OS | Változat | Rendszer betűtípus |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| ablakok | Távlat | Segoe felhasználói felület |
| ablakok | XP | Tahoma |
| ablakok | 3,1-re nekem | Microsoft Sans Serif |
| Android | Fagylalt szendvics (4,0) + | Roboto |
| Android | Cupcake (1.5) - Méhsejt (3.2.6) | Droid Sans |
| Ubuntu | Minden verzió | Ubuntu |
Már a részletet is elérheti!
Az előszó oka az, hogy megmutatja, milyen mélyre lehet szükség a rendszer betűtípusainak támogatásához. Ezenkívül segít megmutatni, hogy az új rendszerverziókkal új betűkészletek jönnek, és ezáltal lehetősége van a betűkészlet frissítésére.
1. módszer: Rendszerfontok elemszinten
A Chrome és a Safari nemrégiben szállítottak „system-ui” -t, amely egy általános betűtípus-család, amely a következő példákban használható az „-apple-system” és a „BlinkMacSystemFont” helyett. Hat tipp JJ-nek az információkért.A rendszerfontok alkalmazásának egyik módja az, hogy közvetlenül meghívja őket egy elemre a font-familytulajdonság használatával.
A GitHub ezt a módszert használja a webhelyén, rendszerfontokat alkalmazva az bodyelemre:
/* 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"; )A Medium és a WordPress admin is hasonló megközelítést alkalmaz, kis eltérésekkel, elsősorban az Oxygen Sans (a GNU + Linux operációs rendszerhez készült) és a Cantarell (a GNOME operációs rendszerhez készült) támogatásával. Ez a kódrészlet emellett bizonyos típusú hangulatjelek és szimbólumok támogatását is megszünteti:
/* 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; )Megjegyzés: Ezt a módszert csak a font-familytulajdonságon kell használni , a fontgyorsírás helyett . A Booking.com alapos leírást tett közzé az általa generált figyelmeztetésekről, mivel a vezető betűtípus eladói előtagnak tűnik.
2. módszer: A rendszer betűkészlete
Az első módszer korlátja, hogy meg kell hívnia a teljes betűkészletet, valahányszor egy elemen használják, és ez nehézkessé válhat, és felfújhatja a kódot, attól függően, hogy hol és hogyan használják.
Jonathan Neal egy alternatív módszert kínál, ahol a rendszerbetűtípusokat deklarálják @font-face.
Ennek az az előnye, hogy egyszer deklarálhatja a betűkészleteket, és ez lesz az a font-familytulajdonság , amit a tulajdonságon megtehet a hosszú betűtípus-lista helyett.
/* 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"; )Ne feledje, hogy Jonathan teljes példája szemlélteti a systemfenti kódrészletben definiált betűtípus-család variációinak meghatározását a dőlt betű, az ív és a további súlyok figyelembe vétele érdekében.
Összefüggő
- OS-specifikus betűtípusok a CSS-ben - amely tartalmaz egy JavaScript-módszert a használt betűtípus teszteléséhez.
- Rendszer betűtípusok SVG-ben
- Rendszerfontok implementálása a Booking.com-on - tanulság - A Booking.com megosztja, hogyan tanultak a rendszer betűtípusának használatával a
fontgyorsíráson, nem a várt módon.