Konkreetse operatsioonisüsteemi süsteemi fondi vaikevalik võib suurendada jõudlust, kuna brauser ei pea alla laadima ühtegi fondifaili, vaid kasutab seda, mis tal juba oli. See kehtib iga „veebis ohutu” fondi kohta. „Süsteemi” fontide ilu on see, et need sobivad praeguse operatsioonisüsteemi kasutatavaga, nii et see võib olla mugav välimus.
Mis need süsteemifondid on? Selle kirjutamise ajal laguneb see järgmiselt:
| OS | Versioon | Süsteemi font |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Vista | Segoe kasutajaliides |
| Windows | XP | Tahoma |
| Windows | 3,1 minuni | Microsoft Sans Serif |
| Android | Jäätisevõileib (4,0) + | Roboto |
| Android | Kook (1,5) kuni kärgstruktuur (3.2.6) | Droid Sanid |
| Ubuntu | Kõik versioonid | Ubuntu |
Juba saate juppi!
Eessõna põhjus on see, et see näitab, kui sügavale peate võib-olla süsteemi fontide toetamiseks tagasi minema. Lisaks aitab see näidata, et uute süsteemiversioonide korral tulevad uued fondid ja seega võimalus oma fondivirna värskendada.
1. meetod: süsteemifondid elemendi tasemel
Chrome ja Safari on hiljuti tarninud "system-ui", mis on üldine fondiperekond, mida saab järgmistes näidetes kasutada "-apple-system" ja "BlinkMacSystemFont" asemel. Mütsiots JJ-le info saamiseks.Üks meetod süsteemifondide rakendamiseks on nende font-familyatribuudi abil otse elemendi kutsumine .
GitHub kasutab oma saidil seda meetodit, rakendades bodyelemendile süsteemifonte :
/* 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"; )Nii Medium kui ka WordPressi administraator kasutavad sarnast lähenemist, väikeste variatsioonidega, eriti tugi Oxygen Sansile (loodud GNU + Linuxi operatsioonisüsteemile) ja Cantarellile (loodud GNOME operatsioonisüsteemile). See koodilõik kaotab ka teatud tüüpi emotikonide ja sümbolite toetuse:
/* 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; )Märkus. Seda meetodit tuleks kasutada ainult lühikese kirja font-familyasemel atribuudil font. Booking.com avaldas põhjaliku ettekirjutuse hoiatuste kohta, mida see tekitab tänu sellele, et juhtfont näib olevat müüja eesliide.
2. meetod: süsteemi fondivirnad
Esimese meetodi piirang on see, et peate helistama kogu fondide virnale iga kord, kui seda elemendil kasutatakse, mis võib muutuda teie kohmakaks ja punnitada, sõltuvalt sellest, kus ja kuidas seda kasutatakse.
Jonathan Neal pakub alternatiivset meetodit, kus süsteemifondid deklareeritakse kasutades @font-face.
Eeliseks on see, et saate fonte üks kord deklareerida ja siis saab sellest font-familyiga kord vara pika fontide loendi asemel vara, mida saate sellel kinnistul kasutada.
/* 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"; )Pange tähele, et Jonathani täielik näide illustreerib võimalust määratleda systemülaltoodud koodilõigus määratletud fondiperekonna variatsioonid, et võtta arvesse kursiiv, painutus ja lisaraskused.
Seotud
- OS-i spetsiifilised fondid CSS-is - mis sisaldab JavaScripti meetodit kasutatava fondi testimiseks.
- Süsteemi fondid SVG-s
- Süsteemifondide juurutamine Booking.com-is - õppetund - Booking.com jagab, kuidas nad saidi käsiraamatus süsteemi fondivirna abil teada, et
fontsee ei toimi ootuspäraselt.