DevToolPal
ID

Generator Font Stack CSS

Buat font-family stack CSS lintas platform dengan font sistem, fallback Mandarin/Jepang/Korea, dan emoji.

Berjalan lokal, tidak pernah diunggah

Opsi

Tanda kutip

CSS

0 karakter · 0 B

Fungsi alat ini

Generator Font Stack CSS membuat nilai font-family siap tempel dari font yang sudah terpasang di perangkat pengunjung Anda. Pilih sebuah gaya, misalnya font UI sistem bawaan, neo-grotesque seperti Inter dan Helvetica, serif transitional seperti Charter, atau monospace yang nyaman untuk kode, dan alat ini akan menyusun font terbaik di setiap platform dengan urutan yang tepat.

Stack-stack ini mengikuti koleksi Modern Font Stacks yang terkenal, ditambah stack klasik -apple-system, BlinkMacSystemFont, "Segoe UI" yang masih dipakai banyak situs. Anda bisa menambahkan fallback untuk teks Mandarin Sederhana, Mandarin Tradisional, Jepang, Korea, Arab, Thai, atau Hindi, serta font emoji berwarna di bagian akhir.

Cara menggunakannya

  1. Pilih Font stack. Pratinjau di sebelah kiri menunjukkan tampilannya di perangkat yang sedang Anda pakai; Anda bisa mengubah teksnya untuk mencoba kata-kata Anda sendiri.
  2. Pilih Font untuk aksara lain jika halaman Anda berisi teks Mandarin, Jepang, Korea, Arab, Thai, atau Hindi.
  3. Aktifkan atau nonaktifkan Tambahkan font emoji.
  4. Pilih Output: deklarasi font-family biasa, CSS custom property, entri fontFamily Tailwind, atau daftar biasa.
  5. Salin hasilnya atau unduh sebagai file .css.

Nama yang mengandung spasi atau diawali angka otomatis diberi tanda kutip; keyword CSS seperti system-ui dan sans-serif tidak pernah dikutip, karena mengutipnya akan mengubahnya menjadi nama font yang tidak ada.

Contoh

UI sistem dengan fallback Mandarin Sederhana:

font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Tips

  • Gunakan satu stack untuk teks isi dan stack monospace untuk kode: dua stack sistem tidak menambah beban muat sama sekali.
  • Pratinjau bergantung pada font yang terpasang di perangkat Anda sendiri, jadi periksa juga halamannya di Windows dan di ponsel.
  • Jika nanti Anda menambahkan web font, taruh di urutan pertama dan pertahankan stack sistem sebagai fallback.

FAQ

› Apa itu font stack?

Daftar keluarga font di properti CSS font-family. Browser memakai font pertama yang terpasang di perangkat dan beralih ke font berikutnya jika tidak ada, diakhiri dengan keluarga generik seperti sans-serif.

› Mengapa perlu menambahkan font Mandarin, Jepang, atau Korea?

Font Barat seperti Inter atau Charter tidak memiliki glyph CJK. Mencantumkan PingFang SC, Microsoft YaHei, atau Noto Sans SC sebelum keluarga generik membuat teks Mandarin memakai font yang gayanya serasi, bukan font apa pun yang dipilih sistem. Hal yang sama berlaku untuk bahasa Arab, Thai, dan Hindi (Dewanagari). Bahasa Rusia, Ukraina, Yunani, Vietnam, Turki, Polandia, dan bahasa lain beraksara Latin atau Sirilik tidak perlu tambahan apa pun: font sistem dan Noto di setiap stack sudah mencakupnya.

› Mengapa font emoji dicantumkan setelah sans-serif?

Font emoji hanya mencakup emoji. Menaruhnya di akhir memastikan huruf dan angka biasa tidak pernah dirender dengan font emoji, sementara emoji tetap mendapat glyph berwarna di setiap platform.

› Apakah stack ini perlu mengunduh web font?

Tidak. Setiap stack memakai font bawaan Windows, macOS, iOS, Android, atau distribusi Linux umum, sehingga halaman dimuat tanpa satu pun request font.