Lompat ke konten
Aback Tools Logo

Generator Tumpukan Penggantian Font

Hasilkan tumpukan font-family CSS yang siap produksi dengan fallback lintas platform yang tepat. Pilih dari 90+ ​​Google Font pilihan dalam 5 kategori - Sans Serif, Serif, Monospace, Display, dan Handwriting. Setiap kategori hadir dengan beberapa opsi tumpukan cadangan yang mencakup font sistem MacOS, Windows, Linux, iOS, dan Android. Pratinjau tumpukan Anda secara langsung, salin deklarasi CSS, cuplikan @import, atau varian tumpukan apa pun - semuanya dengan satu klik. Sepenuhnya gratis, tidak perlu mendaftar.

Font Fallback Stack Generator

Select a primary font and a fallback category to generate your CSS font-family stack.

Or switch to "Quick Presets" for ready-to-use recommendations.

Tentang Tumpukan Penggantian Font

  • Tumpukan font-family adalah daftar font yang dipisahkan koma di CSS Anda. Browser mencoba setiap font secara berurutan - jika font utama tidak diinstal atau gagal dimuat, browser akan kembali ke font berikutnya. Tumpukan yang dibuat dengan baik memastikan teks selalu dapat dibaca, bahkan ketika font web khusus Anda tidak tersedia.
  • Alat ini menggabungkan font utama pilihan Anda (Google Font atau nama font khusus apa pun) dengan daftar cadangan sistem pilihan yang disusun berdasarkan kategori. Setiap kategori - Sans Serif, Serif, Monospace, Display, dan Handwriting - memiliki beberapa varian tumpukan dari dasar (Arial, Helvetica, sans-serif) hingga komprehensif (font sistem Apple, Segoe UI, Roboto, dll.).
  • Bahkan dengan font-display: swap, ada momen singkat ketika font cadangan dirender sebelum font khusus dimuat. Tumpukan fallback yang baik dengan metrik serupa (tinggi x, lebar, berat) mengurangi Pergeseran Tata Letak Kumulatif (CLS) dan memberikan pengalaman membaca yang lebih lancar. Ini penting untuk Data Web Inti.
  • Selalu cocokkan kategori fallback dengan font utama Anda. Font utama serif harus kembali ke font sistem serif, bukan sans-serif. Kategori yang tidak cocok menyebabkan perubahan visual yang mengejutkan saat fallback dirender. Alat ini secara otomatis memilih kategori font utama sebagai kategori cadangan default.

Pertanyaan yang Sering Diajukan

Tumpukan font-family adalah daftar font yang diprioritaskan di CSS Anda. Browser mencoba menggunakan font pertama; jika tidak tersedia atau gagal dimuat, ia akan mencoba yang berikutnya. Hal ini memastikan teks selalu ditampilkan dalam font yang dapat dibaca, apa pun font yang telah diinstal pengguna.

Alat ini menghasilkan tumpukan lintas platform yang komprehensif yang mencakup macOS, Windows, Linux, iOS, Android, dan ChromeOS. Menulis ini secara manual rawan kesalahan - Anda mungkin lupa font khusus platform atau menggunakan kutipan yang salah. Alat ini memastikan setiap tumpukan sudah benar dan lengkap.

Setiap kategori memiliki beberapa varian. Tumpukan 1 (Direkomendasikan) adalah yang paling komprehensif - mencakup semua sistem operasi utama dengan font asli sistem. Stack 2 lebih pendek untuk dukungan browser lama. Stack 3 adalah fallback minimal yang aman untuk web. Tumpukan yang disarankan adalah yang terbaik untuk sebagian besar proyek.

Nama font yang mengandung spasi (seperti "Times New Roman") harus diapit tanda kutip tunggal atau ganda. Kata kunci umum (serif, sans-serif, monospace, kursif) dan font sistem yang dimulai dengan tanda hubung (seperti -apple-system) TIDAK boleh dikutip. Alat ini menangani penawaran harga dengan benar.

Ya. Gunakan pemilih font untuk memilih dari 90+ ​​Google Font pilihan, atau ketik nama font khusus apa pun di kotak pencarian. Alat ini menghasilkan tumpukan untuk nama font apa pun yang Anda masukkan.

Tumpukan fallback yang cocok mengurangi Pergeseran Tata Letak Kumulatif (CLS). Jika font cadangan memiliki metrik serupa dengan font kustom Anda, teks tidak akan bergeser saat font kustom dimuat. Dikombinasikan dengan font-display: swap, ini memberikan keseimbangan terbaik antara kinerja dan konsistensi visual.

Ya. Tambahkan tumpukan ke tailwind.config.js Anda di bawah theme.extend.fontFamily. Misalnya: fontFamily: { judul: ['Playfair Display', 'Georgia', 'serif'] }. Kemudian gunakan judul font kelas utilitas di markup Anda.

Ya - klien email hanya mendukung sedikit font. Kebanyakan hanya merender font yang aman untuk web seperti Arial, Georgia, Times New Roman, Courier, dan Verdana. Tumpukan fallback dasar Sans Serif dan Serif kami berfungsi dengan baik untuk templat email.