Tietyn käyttöjärjestelmän järjestelmän kirjasimen oletusarvo voi parantaa suorituskykyä, koska selaimen ei tarvitse ladata fonttitiedostoja, vaan se käyttää jo olemassa olevaa kirjasinta. Tämä pätee kuitenkin kaikkiin "web safe" -kirjasimiin. "Järjestelmä" -fonttien kauneus on, että ne vastaavat nykyisen käyttöjärjestelmän käyttämiä, joten ne voivat olla mukavia.
Mitkä ovat nämä järjestelmän fontit? Tämän kirjoituksen aikaan se hajoaa seuraavasti:
| Käyttöjärjestelmä | Versio | Järjestelmän fontti |
|---|---|---|
| Mac-käyttöjärjestelmän kymmenes versio | El Capitan | San Francisco |
| Mac-käyttöjärjestelmän kymmenes versio | Yosemite | Helvetica Neue |
| Mac-käyttöjärjestelmän kymmenes versio | Mavericks | Lucida Grande |
| Windows | Vista | Segoe UI |
| Windows | XP | Tahoma |
| Windows | 3.1 ME: lle | Microsoft Sans Serif |
| Android | Jäätelövoileipä (4.0) + | Roboto |
| Android | Kuppikakku (1.5) - Hunajakenno (3.2.6) | Droid Sans |
| Ubuntu | Kaikki versiot | Ubuntu |
Mene katkelmaan jo!
Esipuheen syy on se, että se osoittaa, kuinka syvältä joudut ehkä palaamaan järjestelmän fonttien tukemiseen. Lisäksi se auttaa osoittamaan, että uusien järjestelmäversioiden myötä tulevat uudet fontit ja siten mahdollisuus päivittää fonttipino.
Tapa 1: Järjestelmäkirjasimet elementtitasolla
Chrome ja Safari ovat hiljattain toimittaneet ”system-ui”, joka on yleinen kirjasinperhe, jota voidaan käyttää seuraavissa esimerkeissä ”-apple-system” ja “BlinkMacSystemFont”. Hattuvinkki JJ: lle.Yksi tapa käyttää fontteja on kutsua ne suoraan elementille font-familyominaisuuden avulla.
GitHub käyttää tätä menetelmää sivustossaan ja käyttää järjestelmäkirjasimia bodyelementtiin:
/* 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"; )Sekä Medium että WordPress-järjestelmänvalvoja käyttävät samanlaista lähestymistapaa, pienellä vaihtelulla, erityisesti tukemalla Oxygen Sansia (luotu GNU + Linux -käyttöjärjestelmälle) ja Cantarellia (luotu GNOME-käyttöjärjestelmälle). Tämä katkelma menettää myös tuen tietyntyyppisille emojille ja symboleille:
/* 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; )Huomaa: Tätä menetelmää tulisi käyttää vain font-familykiinteistössä fontlyhenteen sijaan . Booking.com julkaisi perusteellisen varoituksen siitä, että se johti johtuvaan kirjasimeen, joka näytti olevan toimittajan etuliite.
Tapa 2: Järjestelmän fonttipinot
Ensimmäisen menetelmän rajoitus on, että joudut kutsumaan koko fontin pinon joka kerta, kun sitä käytetään elementissä, mikä voi hankaloittaa ja turvottaa koodisi sen mukaan, missä ja miten sitä käytetään.
Jonathan Neal tarjoaa vaihtoehtoisen menetelmän, jossa järjestelmäkirjasimet ilmoitetaan käyttäen @font-face.
Etu tässä on, että voit ilmoittaa kirjasimet kerran ja sitten siitä tulee asia, jonka voit omistaa font-familyomaisuudella pitkän fonttien luettelon sijasta joka kerta.
/* 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"; )Huomaa, että Jonathanin koko esimerkki kuvaa kykyä määritellä systemyllä olevassa katkelmassa määritetyn fonttiperheen muunnelmat kursiivin, taivutuksen ja lisäpainojen huomioon ottamiseksi.
Liittyvät
- Käyttöjärjestelmäkohtaiset fontit CSS: ssä - joka sisältää JavaScript-menetelmän käytetyn fontin testaamiseksi.
- Järjestelmäfontit SVG: ssä
- Järjestelmäkirjasinten käyttöönotto Booking.comissa - opittu - Booking.com jakaa, kuinka he oppivat käyttämään järjestelmän kirjasinpinoa
fontlyhenteessä, ei toimi odotetulla tavalla.