toolsmoah

Pemapar Google Fonts

Cari dan pratonton Google Fonts. Cari fon yang sempurna untuk projek web anda dan lihat bagaimana ia kelihatan dalam masa nyata.

Carian Fon
Cari atau tapis fon yang anda inginkan.
Roboto
sans-serif•18 gaya
Open Sans
sans-serif•12 gaya
Noto Sans JP
sans-serif•9 gaya
Montserrat
sans-serif•18 gaya
Inter
sans-serif•18 gaya
Poppins
sans-serif•18 gaya
Lato
sans-serif•10 gaya
Material Icons
monospace•1 gaya
Roboto Condensed
sans-serif•18 gaya
Roboto Mono
monospace•14 gaya
Roboto
Sans-serif • 18 gaya
Hello! Pemapar Google Fonts. Rubah coklat pantas melompat ke atas anjing malas. 1234567890
Dapatkan Kod
Salin kod untuk menggunakan fon pada projek web anda.

Tampal kod di atas di dalam tag head fail HTML anda.

📚 Panduan Lengkap Google Fonts

Ketahui cara menggunakan Google Fonts dengan berkesan

🎨🎨 Apa itu Google Fonts?

Google Fonts adalah perkhidmatan fon web percuma yang disediakan oleh Google.

  • 1,400+ keluarga fon sumber terbuka
  • Lesen percuma untuk kegunaan komersial
  • Pengedaran global melalui CDN pantas
  • Sokongan untuk pelbagai bahasa dan sistem tulisan
  • Dioptimumkan untuk reka bentuk web responsif

⚡⚡ Cara Menggunakan Fon Web

1. Menggunakan dalam HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

2. Menggunakan dalam CSS

body {
  font-family: 'Noto Sans KR', sans-serif;
}

🚀🚀 Petua Pengoptimuman Prestasi

  • Gunakan font-display: swap untuk mengelakkan FOIT
  • Gunakan preconnect untuk mengurangkan masa carian DNS
  • Muatkan hanya font-weight yang diperlukan secara selektif
  • Hadkan set aksara dengan parameter subset
  • Sediakan fallback fon tempatan

Contoh pemuatan yang dioptimumkan:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean" rel="stylesheet">

📱📱 Tipografi Responsif

Tetapan untuk kebolehbacaan optimum merentasi pelbagai peranti:

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}
  • 모바일: 16px 이상 권장
  • 태블릿: 18px 이상 권장
  • 데스크톱: 20px 이상 권장

🎯🎯 Panduan Pemilihan Fon

Fon yang disyorkan mengikut penggunaan:

  • Teks badan: Noto Sans KR, Spoqa Han Sans
  • Tajuk: Noto Serif KR, Gowun Dodum
  • Kod: Fira Code, JetBrains Mono
  • Hiasan: Jua, Gamja Flower

Kriteria pemilihan:

  • Konsistensi dengan identiti jenama
  • Kebolehbacaan dan kebolehcapaian
  • Julat sokongan berbilang bahasa
  • Prestasi pemuatan

🔧🔧 Penggunaan Lanjutan

Menggunakan Fon Boleh Ubah:

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

Menggunakan Sifat Tersuai CSS:

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ Pertimbangan Kebolehcapaian

  • Nisbah kontras yang mencukupi: WCAG 4.5:1 atau lebih tinggi
  • Jarak baris yang betul: 1.4~1.6 disyorkan
  • Saiz fon yang boleh dibaca: minimum 16px
  • Mesra disleksia: pertimbangkan OpenDyslexic dll.

Contoh CSS yang boleh diakses:

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 Nyahpepijat dan Pengujian

Pengesahan pemuatan fon:

  • Semak fail fon dalam tab Rangkaian DevTools
  • Semak fon yang digunakan sebenar dalam gaya Dikira
  • Uji tingkah laku paparan fon

Alat pengukuran prestasi:

  • Google PageSpeed Insights
  • WebPageTest
  • Pemeriksaan pengoptimuman fon Lighthouse

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;

💡💡 Petua Praktikal

Persediaan projek:

  • Tentukan peraturan fon dalam sistem reka bentuk
  • Wujudkan strategi pemuatan fon
  • Konfigurasi tindanan fon fallback
  • Sediakan pemantauan prestasi

Penyelenggaraan:

  • Pengurusan versi fon
  • Bersihkan berat yang tidak digunakan
  • Pemeriksaan prestasi berkala
  • Semak kemas kini fon baru
    Pemapar Google Fonts