Konkrētas operētājsistēmas sistēmas fonta noklusējums var uzlabot veiktspēju, jo pārlūkprogrammai nav jāielādē fontu faili, bet tas izmanto jau esošo. Tomēr tas attiecas uz jebkuru "tīmeklim drošu" fontu. “Sistēmas” fontu skaistums ir tāds, ka tie atbilst pašreizējam OS izmantotajam, tāpēc tas var būt ērts izskats.
Kādi ir tie sistēmas fonti? Šīs rakstīšanas laikā tas sadalās šādi:
| OS | Versija | Sistēmas fonts |
|---|---|---|
| Mac OS X | El Capitan | Sanfrancisko |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lusida Grande |
| Windows | Vista | Segoe lietotāja interfeiss |
| Windows | XP | Tahoma |
| Windows | 3,1 līdz ME | Microsoft Sans Serif |
| Android | Saldējuma sviestmaize (4,0) + | Roboto |
| Android | Kūka (1,5) līdz Šūnveida (3,2,6) | Droid Sans |
| Ubuntu | Visas versijas | Ubuntu |
Nokļūsti jau pie fragmenta!
Priekšvārda iemesls ir tas, ka tas parāda, cik dziļi jums var būt nepieciešams atgriezties, lai atbalstītu sistēmas fontus. Turklāt tas palīdz parādīt, ka ar jaunām sistēmas versijām nāk jauni fonti un tādējādi iespēja atjaunināt fontu kaudzi.
1. metode: Sistēmas fonti elementa līmenī
Chrome un Safari nesen ir piegādājuši “system-ui”, kas ir vispārīga fontu saime, kuru nākamajos piemēros var izmantot “-apple-system” un “BlinkMacSystemFont”. Cepures padoms JJ, lai iegūtu informāciju.Viena no sistēmas fontu izmantošanas metodēm ir tieši izsaukt tos uz elementu, izmantojot font-familyrekvizītu.
GitHub savā vietnē izmanto šo metodi, bodyelementam piemērojot sistēmas fontus :
/* 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"; )Gan Medium, gan WordPress administrators izmanto līdzīgu pieeju ar nelielām variācijām, jo īpaši atbalstu Oxygen Sans (izveidots operētājsistēmai GNU + Linux) un Cantarell (izveidots operētājsistēmai GNOME). Šis fragments arī zaudē atbalstu noteiktiem emocijzīmju un simbolu veidiem:
/* 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; )Piezīme: Šī metode jāizmanto tikai font-familyīpašumā, nevis fontstenogrāfijas vietā . Booking.com publicēja rūpīgu brīdinājumu rakstīšanu, jo galvenais fonts, šķiet, ir piegādātāja prefikss.
2. metode: sistēmas fontu skursteņi
Pirmās metodes ierobežojums ir tāds, ka katru reizi, kad tiek izmantots elements, jums ir jāizsauc pilna fontu kaudze, un tas var kļūt apgrūtinošs un uzpūst jūsu kodu atkarībā no tā, kur un kā tas tiek izmantots.
Džonatans Nīls piedāvā alternatīvu metodi, kurā sistēmas fonti tiek deklarēti, izmantojot @font-face.
Ieguvums ir tāds, ka jūs varat deklarēt fontus vienreiz, un tad tas kļūst par lietu, ko varat veikt font-familyīpašumā, nevis katru reizi garo fontu sarakstu.
/* 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"; )Ņemiet vērā, ka pilns Džonatana piemērs parāda iespēju definēt systemfontu saimes variantus, kas tika definēti iepriekš esošajā fragmentā, lai ņemtu vērā slīprakstu, saliekto un papildu svaru.
Saistīts
- OS specifiskie fonti CSS - kas ietver JavaScript metodi izmantotā fonta pārbaudei.
- Sistēmas fonti SVG
- Sistēmas fontu ieviešana vietnē Booking.com - gūta mācība - Booking.com dalās ar to, kā viņi iemācījās, izmantojot sistēmas fontu kaudzīti
fontstenogrāfijā, nedarbojas, kā paredzēts.