Mengalihkan fon sistem pada sistem operasi tertentu dapat meningkatkan prestasi kerana penyemak imbas tidak perlu memuat turun fail fon apa pun, ia menggunakan yang sudah ada. Itu betul untuk mana-mana fon "selamat web". Keindahan fon "sistem" adalah sesuai dengan apa yang digunakan oleh OS semasa, sehingga boleh menjadi penampilan yang selesa.
Apakah fon sistem tersebut? Pada masa penulisan ini, ia ditulis sebagai berikut:
| OS | Versi | Fon Sistem |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Tingkap | Vista | Segi UI |
| Tingkap | XP | Tahoma |
| Tingkap | 3.1 kepada SAYA | Microsoft Sans Serif |
| Android | Sandwic Ais Krim (4.0) + | Roboto |
| Android | Cupcake (1.5) hingga Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Semua versi | Ubuntu |
Dapatkan ke coretan, sudah!
Sebab kata pengantar adalah bahawa ia menunjukkan seberapa dalam anda mungkin perlu kembali untuk menyokong fon sistem. Selain itu, ini menunjukkan bahawa dengan versi sistem baru, muncul fon baru, dan dengan itu kemungkinan perlu mengemas kini timbunan fon anda.
Kaedah 1: Fon Sistem pada Tahap Elemen
Chrome dan Safari baru-baru ini mengirimkan "system-ui" yang merupakan keluarga font generik yang dapat digunakan sebagai pengganti "-apple-system" dan "BlinkMacSystemFont" dalam contoh berikut. Petua topi ke JJ untuk maklumat.Salah satu kaedah untuk menerapkan fon sistem adalah dengan memanggilnya secara langsung pada elemen yang menggunakan font-familysifat.
GitHub menggunakan kaedah ini di laman web mereka, menggunakan fon sistem pada bodyelemen:
/* 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"; )Kedua-dua Medium dan admin WordPress menggunakan pendekatan yang serupa, dengan sedikit variasi, terutama sokongan untuk Oxygen Sans (dibuat untuk sistem operasi GNU + Linux) dan Cantarell (dibuat untuk sistem operasi GNOME). Coretan ini juga memberikan sokongan untuk jenis emoji dan simbol tertentu:
/* 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; )Catatan: Kaedah ini hanya boleh digunakan pada font-familyharta tanah dan bukannya jalan fontpintas. Booking.com menerbitkan penulisan terperinci mengenai amaran yang dihasilkannya kerana fon terkemuka nampaknya merupakan awalan vendor.
Kaedah 2: Tumpukan Fon Sistem
Batasan kaedah pertama adalah anda harus memanggil setumpuk fon setiap kali ia digunakan pada elemen dan yang boleh membebankan dan memburukkan kod anda, bergantung pada di mana dan bagaimana ia digunakan.
Jonathan Neal menawarkan kaedah alternatif di mana fon sistem dinyatakan menggunakan @font-face.
Keuntungannya di sini ialah anda dapat menyatakan fon sekali-sekala dan menjadi perkara yang anda boleh lakukan di font-familyharta tanah dan bukannya senarai fon yang panjang setiap masa.
/* 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"; )Perhatikan bahawa contoh lengkap Jonathan menggambarkan keupayaan untuk menentukan variasi systemkeluarga fon yang ditentukan dalam coretan di atas untuk memperhitungkan huruf miring, tebal, dan berat tambahan.
Berkaitan
- Font Spesifik OS dalam CSS - yang merangkumi kaedah JavaScript untuk menguji fon yang sedang digunakan.
- Fon Sistem di SVG
- Menerapkan fon sistem di Booking.com - Pelajaran yang dipelajari - Booking.com berkongsi bagaimana mereka belajar menggunakan timbunan fon sistem di
fontsingkatan tidak berfungsi seperti yang diharapkan.