Če privzeto nastavite sistemsko pisavo določenega operacijskega sistema, lahko povečate zmogljivost, ker brskalniku ni treba prenesti datotek pisav, ampak uporablja tisto, ki jo je že imel. To velja za katero koli "spletno varno" pisavo. Lepota "sistemskih" pisav je, da se ujema s tem, kar uporablja trenutni OS, zato je lahko udobnega videza.
Katere so tiste sistemske pisave? V času pisanja tega članka se razčleni na naslednji način:
| OS | Različica | Sistemska pisava |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Vista | Uporabniški vmesnik Segoe |
| Windows | XP | Tahoma |
| Windows | 3.1 do ME | Microsoft Sans Serif |
| Android | Sladoledni sendvič (4.0) + | Roboto |
| Android | Cupcake (1.5) do satja (3.2.6) | Droid Sans |
| Ubuntu | Vse različice | Ubuntu |
Pojdi že do delčka!
Razlog za predgovor je, da prikazuje, kako globoko se boste morda morali vrniti, da podpirate sistemske pisave. Poleg tega pomaga pokazati, da z novimi različicami sistema prihajajo nove pisave in s tem možnost posodobitve sklada pisav.
Metoda 1: Sistemske pisave na ravni elementa
Chrome in Safari sta pred kratkim poslala sistem-ui, ki je generična družina pisav, ki jo je mogoče v naslednjih primerih uporabiti namesto sistema -apple-system in BlinkMacSystemFont. Nasvet klobuka JJ za informacije.Ena od metod za uporabo sistemskih pisav je neposreden klic elementov z uporabo font-familylastnosti.
GitHub uporablja to metodo na svojem spletnem mestu in pri bodyelementu uporablja sistemske pisave :
/* 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"; )Tako Medium kot skrbnik WordPressa uporabljata podoben pristop z rahlo različico, predvsem podporo za Oxygen Sans (ustvarjen za operacijski sistem GNU + Linux) in Cantarell (ustvarjen za operacijski sistem GNOME). Ta delček odreza tudi podporo za nekatere vrste čustvenih simbolov in simbolov:
/* 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; )Opomba: Ta metoda se sme uporabljati samo v font-familylastnostih namesto v fontstenografiji. Booking.com je objavil temeljit opis opozoril, ki jih ustvari zaradi vodilne pisave, ki se zdi predpona prodajalca.
2. način: Nabori sistemskih pisav
Omejitev prve metode je, da morate poklicati celoten sklop pisav vsakič, ko se uporablja za element, kar lahko postane okorno in napihne kodo, odvisno od tega, kje in kako se uporablja.
Jonathan Neal ponuja alternativno metodo, pri kateri so sistemske pisave prijavljene z uporabo @font-face.
Prednost tukaj je, da lahko pisave razglasite enkrat, nato pa to postane stvar, ki jo lahko v font-familylastnostih namesto vsakega dolgega seznama pisav.
/* 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"; )Upoštevajte, da Jonathanov celoten primer ponazarja zmožnost definiranja sprememb systemdružine pisav, ki je bila definirana v zgornjem delčku, da se upoštevajo ležeče črte, krepko pisavo in dodatne uteži.
Sorodno
- Pisave, specifične za OS, v CSS - ki vključujejo metodo JavaScript za preizkušanje pisave v uporabi.
- Sistemske pisave v SVG
- Uvajanje sistemskih pisav na Booking.com - Naučena lekcija - Booking.com deli, kako so se naučili s pomočjo sistemskega sklada pisav v
fontokrajšavi, ne deluje po pričakovanjih.