Nustačius tam tikros operacinės sistemos sistemos šriftą, našumas gali padidėti, nes naršyklė neturi atsisiųsti jokių šrifto failų, ji naudoja jau turimą šriftą. Tai pasakytina apie bet kokį „saugų žiniatinklį“ šriftą. „Sisteminių“ šriftų grožis yra tas, kad jie atitinka tai, ką naudoja dabartinė OS, todėl tai gali būti patogi išvaizda.
Kas yra tie sistemos šriftai? Rašymo metu jis suskaidomas taip:
| OS | Versija | Sistemos šriftas |
|---|---|---|
| „Mac OS X“ | El Capitan | San Franciskas |
| „Mac OS X“ | Josemitas | Helvetica Neue |
| „Mac OS X“ | „Mavericks“ | Lucida Grande |
| „Windows“ | Vista | „Segoe“ vartotojo sąsaja |
| „Windows“ | XP | Tahoma |
| „Windows“ | 3,1 iki ME | „Microsoft Sans Serif“ |
| „Android“ | Ledų sumuštinis (4,0) + | Robotas |
| „Android“ | „Cupcake“ (1,5) - korio (3.2,6) | „Droid Sans“ |
| „Ubuntu“ | Visos versijos | „Ubuntu“ |
Jau gaukite prie fragmento!
Pratarmės priežastis yra ta, kad ji parodo, kiek giliai gali tekti grįžti palaikyti sistemos šriftų. Be to, tai padeda parodyti, kad su naujomis sistemos versijomis atkelkite naujus šriftus, taigi ir galimybę atnaujinti šriftą.
1 metodas: sistemos šriftai elemento lygiu
„Chrome“ ir „Safari“ neseniai pristatė „system-ui“, kuri yra bendroji šriftų šeima, kuri gali būti naudojama vietoj „-apple-system“ ir „BlinkMacSystemFont“ toliau pateiktuose pavyzdžiuose. Kepurės patarimas JJ, kad gautumėte informacijos.Vienas iš sistemos šriftų taikymo būdų yra tiesioginis jų iškvietimas naudojant elementą naudojant font-familyypatybę.
„GitHub“ naudoja šį metodą savo svetainėje, bodyelementui pritaikydami sistemos šriftus :
/* 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"; )Tiek „Medium“, tiek „WordPress“ administratorius taiko panašų metodą, šiek tiek varijuodamas, visų pirma palaikydamas „Oxygen Sans“ (sukurtas „GNU + Linux“ operacinei sistemai) ir „Cantarell“ (sukurtas „GNOME“ operacinei sistemai). Šis fragmentas taip pat atsisako tam tikrų tipų jaustukų ir simbolių palaikymo:
/* 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; )Pastaba: Šis metodas turėtų būti naudojamas tik font-familynuosavybėje, o ne fontstenografijoje. „Booking.com“ paskelbė išsamų įspėjimų, kuriuos jis generuoja dėl to, kad pagrindinis šriftas atrodo kaip pardavėjo priešdėlis.
2 metodas: sistemos šriftų krūvos
Pirmojo metodo apribojimas yra tai, kad kiekvieną kartą, kai jis naudojamas elementui, turite iškviesti visą šriftą, kuris gali būti sudėtingas ir išpūsti jūsų kodą, priklausomai nuo to, kur ir kaip jis naudojamas.
Jonathanas Nealas siūlo alternatyvų metodą, kai sistemos šriftai deklaruojami naudojant @font-face.
Privalumas yra tas, kad jūs galite vieną kartą deklaruoti šriftus, o tada tai tampa tuo, ką galite font-familynuosavybėje, o ne kiekvieną kartą ilgą šriftų sąrašą.
/* 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"; )Atminkite, kad visas Jonathano pavyzdys rodo galimybę apibrėžti systemšriftų šeimos variantus, kurie buvo apibrėžti aukščiau esančiame fragmente, kad būtų atsižvelgta į kursyvą, lenkimą ir papildomus svorius.
Susijęs
- OS specifiniai šriftai CSS - kuris apima „JavaScript“ metodą naudojamo šrifto testavimui.
- Sistemos šriftai SVG
- Sistemos šriftų diegimas „Booking.com“ - išmokta pamoka - „Booking.com“ dalijasi, kaip jie išmoko naudojant sistemos šriftų štabą
fontstenografijoje, neveikia taip, kaip tikėtasi.