Generator Tumpukan Font Aman Web
Bangun string fallback keluarga font CSS untuk font apa pun dengan generator tumpukan font aman web gratis kami. Pilih font utama Anda, pilih keluarga generik, dan pilih fallback yang aman untuk OS yang mencakup Windows, macOS, Linux, iOS, dan Android. Dapatkan nilai, deklarasi, dan aturan CSS yang siap ditempel - semua pemrosesan berjalan secara lokal di browser Anda tanpa perlu mendaftar.
Enter your primary font name, choose a generic family, and select OS-safe fallback fonts. The web safe font stack generator builds a complete font-family CSS value ready to copy into your stylesheet. All processing runs locally in your browser.
Enter the exact font name as it appears in your @font-face or Google Fonts import
Select the OS-safe fonts to include as fallbacks. They will appear in the stack in the order shown below, before the generic family keyword.
Copy the font-family value and paste it into your CSS. Make sure your primary font is loaded via @font-face or a Google Fonts <link> tag - the fallbacks only activate when the primary font fails to load.
Mengapa Menggunakan Generator Tumpukan Font Aman Web Kami?
- Pembuatan Tumpukan Font Instan: Buat tumpukan fallback keluarga font CSS lengkap untuk font apa pun dalam hitungan detik. Generator tumpukan font aman web kami menghasilkan nilai CSS yang siap ditempel dengan font utama Anda, fallback yang aman untuk OS, dan keluarga generik yang benar - tidak perlu menunggu, tidak perlu bolak-balik server.
- Secure Font Stack Generator Online: Semua pembuatan tumpukan font berjalan secara lokal di browser Anda. Nama font dan keluaran CSS Anda tidak pernah keluar dari perangkat Anda, memastikan privasi 100% setiap kali Anda menggunakan generator tumpukan font aman web kami secara online.
- Font Stack Generator Online - Tanpa Instalasi: Gunakan generator tumpukan font aman web kami langsung di browser apa pun tanpa memerlukan unduhan, plugin, atau perangkat lunak. Hasilkan tumpukan font CSS untuk font apa pun dari perangkat apa pun, di mana pun, sepenuhnya gratis.
- Berbagai Pilihan Keluarga Generik: Pilih dari enam keluarga generik - sans-serif, serif, monospace, system-ui, kursif, dan fantasi. Setiap keluarga dilengkapi dengan serangkaian font fallback aman OS yang mencakup Windows, macOS, Linux, iOS, dan Android.
Kasus Penggunaan Umum untuk Generator Tumpukan Font Aman Web
- Tipografi Aplikasi Web: Gunakan generator tumpukan font aman web kami untuk membangun tumpukan font yang kuat untuk aplikasi web yang harus dirender secara konsisten di Windows, macOS, Linux, iOS, dan Android - bahkan ketika font web utama gagal dimuat.
- Integrasi Google Font: Pasangkan Google Font apa pun dengan fallback yang aman untuk OS menggunakan pembuat tumpukan font kami. Saat Google Font diblokir atau lambat, tumpukan fallback Anda memastikan pengguna masih melihat jenis huruf yang mirip secara visual, bukan font default browser.
- Desain Templat Email: Klien email sering kali memblokir font web. Gunakan generator tumpukan font aman web kami untuk membuat tumpukan font yang dapat diturunkan dengan baik ke font sistem seperti Arial, Georgia, atau Courier New di Gmail, Outlook, dan Apple Mail.
- Tumpukan Font UI Sistem: Bangun tumpukan font sistem-ui modern yang digunakan oleh GitHub, Bootstrap, dan Tailwind CSS. Generator kami mencakup -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, dan semua fallback yang tepat untuk nuansa OS asli.
- Penyesuaian Kerangka CSS: Ganti tumpukan font default di Tailwind CSS, Bootstrap, atau Material UI dengan membuat nilai jenis font khusus dengan font merek Anda di bagian atas dan fallback aman OS yang benar di bawahnya.
- Tipografi yang Mengutamakan Performa: Kurangi pergeseran tata letak (CLS) dengan memilih font cadangan yang paling cocok dengan metrik font utama Anda. Generator tumpukan font aman web kami membantu Anda memilih fallback dengan tinggi x dan lebar karakter yang serupa untuk pertukaran font yang lebih lancar.
Apa itu Tumpukan Font Aman Web?
Tumpukan font aman web adalah nilai kelompok font CSS yang mencantumkan beberapa font dalam urutan prioritas - font utama Anda terlebih dahulu, diikuti oleh font cadangan web aman , dan diakhiri dengan kata kunci keluarga umum seperti sans-serif atau serif . Ketika browser tidak dapat memuat font utama, browser akan berpindah ke tumpukan hingga menemukan font yang diinstal pada sistem operasi pengguna. Font aman web adalah font yang sudah diinstal sebelumnya di hampir semua sistem operasi utama - Windows, macOS, Linux, iOS, dan Android - menjadikannya pengganti yang andal. Generator tumpukan font aman web kami membangun nilai CSS lengkap untuk Anda dengan fallback yang tepat untuk keluarga umum pilihan Anda.
Cara Kerja Generator Tumpukan Font Aman Web Kami
- Masukkan Font Utama Anda: Ketikkan nama persis font utama Anda - Font Google, font web khusus, atau font apa pun yang dimuat melalui @font-face . Gunakan preset font populer untuk akses cepat ke pilihan umum seperti Inter, Roboto, atau Playfair Display.
- Pemrosesan Berbasis Browser Instan: Pilih keluarga generik dan periksa font fallback aman OS yang ingin Anda sertakan. Klik "Hasilkan Tumpukan Font" dan generator langsung membuat nilai CSS keluarga font yang lengkap - semua pemrosesan berjalan secara lokal di browser Anda tanpa panggilan server.
- Salin atau Unduh Output: Salin nilai CSS, deklarasi, atau aturan lengkap dengan satu klik, atau unduh sebagai file .css. Pratinjau langsung menunjukkan bagaimana tumpukan dirender di browser Anda saat ini.
Apa yang Disertakan dalam Font Stack
- Font Utama: Font khusus atau web Anda - pilihan pertama yang dicoba browser. Itu harus dimuat melalui @font-face atau tag <link> Google Fonts agar browser dapat menemukannya.
- Font Cadangan Aman OS: Font sistem pra-instal yang sangat cocok dengan gaya font utama Anda - mencakup Windows (Arial, Segoe UI, Consolas), macOS (Helvetica Neue, -apple-system, Menlo), Linux (Ubuntu, DejaVu Sans Mono), dan platform seluler.
- Kata Kunci Keluarga Generik: Jaring pengaman terakhir - kata kunci CSS seperti sans-serif atau monospace yang memerintahkan browser untuk menggunakan font defaultnya sendiri dengan gaya tersebut jika tidak ada font lain di tumpukan yang tersedia.
- Nama Font yang Dikutip: Nama font yang mengandung spasi secara otomatis diapit tanda kutip ganda (misalnya "Times New Roman" ) seperti yang disyaratkan oleh spesifikasi CSS.
Praktik Terbaik Tumpukan Font Penting
Selalu akhiri tumpukan font Anda dengan kata kunci keluarga umum - ini adalah satu-satunya jaminan penggantian yang didukung oleh setiap browser. Nama font dengan spasi harus diberi tanda kutip; nama satu kata dan kata kunci CSS seperti sans-serif tidak boleh dikutip. Tumpukan system-ui (digunakan oleh GitHub, Bootstrap 5, dan Tailwind CSS) adalah pilihan terbaik untuk komponen UI karena dirender dalam font OS asli, sehingga meningkatkan kinerja yang dirasakan dan mengurangi pergeseran tata letak. Untuk isi teks, pilih fallback dengan tinggi x dan lebar karakter yang mirip dengan font utama Anda untuk meminimalkan Pergeseran Tata Letak Kumulatif (CLS) selama pemuatan font.
Pertanyaan yang Sering Diajukan
Generator tumpukan font yang aman untuk web membuat nilai jenis font CSS yang mencantumkan font utama Anda diikuti dengan font cadangan yang aman untuk OS dan kata kunci keluarga umum. Generator tumpukan font aman web kami berjalan sepenuhnya di browser Anda - tidak ada data yang dikirim ke server mana pun - dan menghasilkan nilai CSS persis yang siap ditempelkan ke stylesheet Anda.
Font aman web adalah font yang sudah diinstal sebelumnya di hampir semua sistem operasi utama - Windows, macOS, Linux, iOS, dan Android. Contohnya termasuk Arial, Helvetica, Georgia, Times New Roman, Courier New, dan Verdana. Karena font ini selalu tersedia, font ini merupakan cadangan yang dapat diandalkan ketika font web kustom gagal dimuat.
Sangat. Semua pembuatan tumpukan font terjadi secara lokal di browser Anda menggunakan JavaScript. Nama font dan keluaran CSS Anda tidak pernah dikirim ke server mana pun, disimpan, atau dicatat. Data Anda tetap sepenuhnya pribadi di perangkat Anda.
Ya. Generator tumpukan font aman web kami 100% gratis tanpa pendaftaran, tanpa akun, dan tanpa batasan penggunaan. Hasilkan tumpukan font untuk font apa pun sebanyak yang Anda perlukan - sepenuhnya gratis, selamanya.
Spesifikasi CSS mengharuskan nama font yang mengandung spasi diapit dengan tanda kutip ganda atau tunggal - misalnya, "Times New Roman" atau 'Helvetica Neue'. Nama font satu kata dan kata kunci keluarga umum seperti sans-serif tidak boleh dikutip. Generator tumpukan font aman web kami menangani penawaran secara otomatis.
Tumpukan font system-ui menggunakan font UI OS asli - San Francisco di macOS/iOS, Segoe UI di Windows, dan Roboto di Android. Ini digunakan oleh GitHub, Bootstrap 5, dan Tailwind CSS untuk komponen UI karena dirender dalam font asli pengguna, sehingga meningkatkan kinerja yang dirasakan dan mengurangi pergeseran tata letak. Gunakan untuk elemen UI seperti tombol, label, dan navigasi.
CLS terjadi ketika browser menukar font cadangan ke font web yang dimuat, menyebabkan teks mengalir ulang. Untuk meminimalkan CLS, pilih font cadangan dengan tinggi x dan lebar karakter yang serupa dengan font utama Anda. Misalnya, Arial adalah pengganti yang bagus untuk Inter karena proporsi mereka sama. Anda juga dapat menggunakan deskriptor penyesuaian ukuran dan penggantian pendakian di @font-face untuk menyempurnakan metrik fallback.
Ya. Arial adalah sans-serif standar di Windows dan Android, sedangkan Helvetica adalah standar di macOS dan iOS. Menyertakan keduanya memastikan kecocokan visual terdekat di semua platform. Generator tumpukan font aman web kami menyertakan keduanya secara default di set cadangan sans-serif.
Ya. Klien email seperti Outlook, Gmail, dan Apple Mail sering kali memblokir font web, sehingga tumpukan cadangan yang kuat sangat penting untuk tipografi email. Gunakan generator tumpukan font aman web kami untuk membuat tumpukan yang terdegradasi dengan baik ke font sistem. Untuk email, prioritaskan font seperti Arial, Georgia, Verdana, dan Courier New karena mereka memiliki dukungan klien email terluas.