Menggunakan font sistem dari sistem operasi tertentu secara default dapat meningkatkan kinerja karena browser tidak perlu mengunduh file font apa pun, itu menggunakan yang sudah ada. Itu benar untuk semua font "web safe". Keindahan dari font "sistem" adalah cocok dengan apa yang digunakan OS saat ini, sehingga bisa menjadi tampilan yang nyaman.
Apa font sistem itu? Pada saat penulisan ini, uraiannya sebagai berikut:
| OS | Versi: kapan | Font Sistem |
|---|---|---|
| Mac OS X | Kapten | San Fransisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Vista | Segoe UI |
| Windows | XP | Tahoma |
| Windows | 3.1 kepada ME | Microsoft Sans Serif |
| Android | Ice Cream Sandwich (4.0) + | Roboto |
| Android | Cupcake (1.5) ke Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Semua versi | Ubuntu |
Dapatkan cuplikannya, sudah!
Alasan pengantar adalah karena ini menunjukkan seberapa dalam Anda mungkin perlu kembali untuk mendukung font sistem. Selain itu, ini membantu menunjukkan bahwa dengan versi sistem baru, muncul font baru, dan dengan demikian kemungkinan perlu memperbarui tumpukan font Anda.
Metode 1: Font Sistem di Tingkat Elemen
Chrome dan Safari baru-baru ini mengirimkan "system-ui" yang merupakan kelompok font umum yang dapat digunakan sebagai pengganti "-apel-sistem" dan "BlinkMacSystemFont" dalam contoh berikut. Hat tip ke JJ untuk infonya.Salah satu metode untuk menerapkan font sistem adalah dengan memanggilnya langsung pada elemen menggunakan font-familyproperti.
GitHub menggunakan metode ini di situs mereka, menerapkan font 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"; )Baik Medium maupun admin WordPress menggunakan pendekatan serupa, dengan sedikit variasi, terutama dukungan untuk Oxygen Sans (dibuat untuk sistem operasi GNU + Linux) dan Cantarell (dibuat untuk sistem operasi GNOME). Cuplikan ini juga memberikan dukungan 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: Metode ini hanya boleh digunakan di font-familyproperti, bukan di fontsteno. Booking.com menerbitkan artikel menyeluruh tentang peringatan yang dihasilkannya karena font utama tampak sebagai awalan vendor.
Metode 2: Tumpukan Font Sistem
Batasan dari metode pertama adalah Anda harus memanggil tumpukan penuh font setiap kali digunakan pada sebuah elemen dan itu bisa merepotkan dan membengkak kode Anda, tergantung di mana dan bagaimana itu digunakan.
Jonathan Neal menawarkan metode alternatif di mana font sistem dinyatakan menggunakan @font-face.
Manfaatnya di sini adalah Anda dapat mendeklarasikan font satu kali dan kemudian itu menjadi hal yang dapat Anda lakukan di font-familyproperti daripada daftar panjang font setiap saat.
/* 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 bahwa contoh lengkap Jonathan menggambarkan kemampuan untuk menentukan variasi jenis systemfont yang ditentukan dalam cuplikan di atas untuk memperhitungkan huruf miring, cetak tebal, dan bobot tambahan.
Terkait
- Font Khusus OS di CSS - yang menyertakan metode JavaScript untuk menguji font yang digunakan.
- Font Sistem dalam SVG
- Menerapkan font sistem di Booking.com - Sebuah pelajaran yang didapat - Booking.com membagikan bagaimana mereka belajar menggunakan tumpukan font sistem secara
fontsingkat tidak berfungsi seperti yang diharapkan.