CodeKitHubApakah alat ini?
Padanan fon bermaksud memilih dua (kadangkala tiga) jenis huruf untuk digunakan bersama pada satu halaman — biasanya satu untuk tajuk dan satu lagi untuk teks badan — supaya halaman mempunyai hierarki visual tanpa kelihatan tidak sepadan atau membosankan.
Setiap padanan di bawah menunjukkan contoh yang dipaparkan secara langsung: fon tajuk di atas, fon teks badan di bawah, menggunakan fail Google Fonts sebenar supaya apa yang anda lihat itulah yang akan anda dapat di laman web anda.
Setiap padanan disertakan dengan tag benam `<link>` Google Fonts yang sedia digunakan serta petikan CSS sepadan dengan pengisytiharan `font-family` untuk tajuk dan teks badan — salin kedua-duanya dan anda sudah selesai.
Kenapa guna alat ini?
- 28 padanan pilihan tangan, bukan senarai yang dijana secara automatik — setiap satu dipilih kerana kedua-dua jenis huruf itu benar-benar saling melengkapi.
- Pratonton langsung: setiap padanan dipaparkan dengan fon sebenar yang dimuatkan daripada Google Fonts, bukan imej statik atau tekaan nama fon.
- Tapis mengikut mood — Moden, Elegan, Berani, Minimalis, Klasik — untuk mempersempit kepada rasa yang diperlukan oleh projek anda.
- Salin sekali klik untuk kedua-dua tag benam `<link>` dan peraturan CSS `font-family`.
- Percuma, berjalan dalam pelayar anda, tiada akaun atau log masuk diperlukan.
Cara menggunakannya
- Jika mahu, klik penapis mood (Moden, Elegan, Berani, Minimalis, Klasik) untuk mempersempit senarai, atau biarkan "Semua" dipilih untuk melayari kesemuanya.
- Imbas kad pratonton langsung — baris atas menunjukkan fon tajuk, baris bawah menunjukkan fon teks badan.
- Buka padanan yang anda suka dan klik untuk mengembangkan bahagian kod benam.
- Salin tag `<link>` ke dalam `<head>` HTML anda, dan salin petikan CSS ke dalam helaian gaya anda untuk menggunakan fon pada tajuk dan teks badan anda.
Contoh
Input
Blog eleganHasil
Playfair Display (tajuk) + Source Sans Pro (teks badan)Menapis mengikut "Elegan" menonjolkan tajuk serif berkontras tinggi yang dipadankan dengan teks badan sans-serif yang bersih dan mudah dibaca — kombinasi biasa untuk susun atur editorial dan blog.
Prinsip padanan fon yang baik
- Kontras berbanding persamaan: dua fon yang kelihatan hampir sama (dua sans-serif geometri yang serupa, misalnya) cenderung kelihatan seperti kesilapan berbanding pilihan yang disengajakan. Padankan serif dengan sans-serif, atau jenis huruf paparan yang berat dengan jenis huruf teks yang lebih ringan, supaya perbezaan itu terbaca sebagai disengajakan.
- Padankan tinggi-x dan perkadaran: fon yang huruf kecilnya berada pada ketinggian visual yang serupa cenderung terasa seolah-olah tergolong pada halaman yang sama, walaupun gayanya berbeza — tinggi-x yang tidak sepadan adalah salah satu sebab paling biasa mengapa padanan terasa "tidak kena".
- Hadkan diri anda kepada dua keluarga (kadangkala tiga): satu untuk tajuk, satu untuk teks badan, dan paling banyak satu ketiga untuk aksen seperti butang atau label. Lebih daripada itu dan halaman mula terasa tidak terancang.
- Pertimbangkan mood, bukan sekadar bentuk: sans bulat yang mesra dipadankan dengan serif formal menghantar isyarat bercampur walaupun bentuk hurufnya secara teknikal serasi bersama — pilih fon yang serasi dari segi nada dan struktur.
- Uji pada saiz sebenar: padanan yang kelihatan hebat dalam pratonton besar boleh kehilangan kontras pada saiz teks badan, atau fon paparan boleh menjadi sukar dibaca pada saiz kecil — sentiasa periksa kedua-dua ekstrem.
Memilih padanan mengikut kes penggunaan
Halaman pendaratan dan laman web pemasaran biasanya mendapat manfaat daripada penapis "Berani" atau "Moden" — fon tajuk yang kuat dan berkontras tinggi menarik perhatian di bahagian atas halaman, dipadankan dengan fon teks badan yang bersih dan neutral yang memudahkan teks panjang dibaca sepintas lalu.
Blog dan kandungan editorial selalunya paling baik dibaca dengan padanan "Elegan" atau "Klasik" — tajuk serif yang halus menandakan suara yang teliti dan disunting, manakala teks badan serif atau sans-serif yang selesa mengekalkan artikel panjang mudah dibaca sepanjang sesi bacaan yang lama.
Laman e-dagang dan produk cenderung memilih padanan "Minimalis" — fon yang terkawal dan neutral mengekalkan fokus pada fotografi produk dan harga berbanding pada tipografi itu sendiri, yang penting apabila puluhan kad produk muncul pada satu halaman.
Portfolio dan laman kreatif mempunyai ruang paling luas untuk bereksperimen — padanan "Berani" atau "Elegan" dengan lebih banyak personaliti boleh berfungsi dengan baik kerana khalayak berada di sana sebahagiannya untuk menilai citarasa visual.
Nota mengenai prestasi dan pelesenan
Tag benam `<link>` memuatkan fon daripada CDN Google, yang pantas dan telah dicache merentas banyak laman yang mungkin sudah dilawati oleh pengunjung anda — tetapi ia menambah satu permintaan luaran. Bagi laman web yang setiap milisaat penting, memuat turun fail fon dan mengehos sendiri (dengan `font-display: swap` ditetapkan secara manual) menghapuskan kebergantungan luaran itu dengan kos sedikit usaha persediaan.
Semua fon pada Google Fonts adalah sumber terbuka dan percuma untuk kegunaan komersial tanpa memerlukan atribusi, walaupun memberi kredit kepada pereka jenis huruf adalah kesopanan yang baik apabila ia mudah dilakukan.
Soalan lazim
Apakah yang menjadikan dua fon "sepadan dengan baik"?
Padanan yang baik mengimbangi kontras dan keharmonian. Kontras — memadankan serif dengan sans-serif, atau jenis huruf paparan berani dengan fon teks badan biasa — mencipta hierarki visual supaya tajuk dan teks badan terasa berbeza. Keharmonian — tinggi-x yang serupa, berat lejang yang setanding, dan rasa formaliti atau keriangan yang dikongsi — mengelakkan kedua-duanya daripada berlanggar. Padanan di sini dipilih dengan mengambil kira kedua-dua perkara ini.
Adakah tajuk dan teks badan perlu sentiasa menggunakan fon yang berbeza?
Tidak, menggunakan satu keluarga jenis huruf untuk kedua-duanya (seperti padanan "Rubik + Rubik" alat ini) juga berfungsi dengan baik, selagi fon itu mempunyai variasi berat yang mencukupi untuk membezakan tajuk daripada teks badan. Ia adalah pilihan yang sah dan minimalis — bukan kesilapan.
Bagaimana saya sebenarnya menggunakan padanan pada laman web saya?
Salin tag benam `<link>` ke dalam `<head>` halaman anda untuk memuatkan fon daripada CDN Google, kemudian salin petikan CSS ke dalam helaian gaya anda — ia menetapkan `font-family` untuk tajuk (h1, h2, h3) dan teks badan (body, p). Laraskan pemilih CSS jika penanda anda berbeza.
Adakah memuatkan Google Fonts akan memperlahankan laman web saya?
Setiap fail fon tambahan menambah permintaan rangkaian dan sedikit risiko sekatan pemaparan. Hadkan kepada satu berat tajuk dan satu atau dua berat teks badan, gunakan `display=swap` (sudah disertakan dalam kod benam) supaya teks dipaparkan dalam fon sandaran semasa fon web dimuatkan, dan pertimbangkan untuk mengehos sendiri fail fon bagi laman pengeluaran yang memerlukan masa muat naik yang paling pantas.
Adakah fon-fon ini percuma untuk kegunaan komersial?
Ya. Setiap fon dalam Google Fonts, termasuk semua padanan yang ditunjukkan di sini, dilesenkan di bawah SIL Open Font License atau Apache License — kedua-duanya membenarkan penggunaan komersial, pengubahsuaian dan pengedaran percuma tanpa royalti.