CSS Academy · Pelajaran

Google Fonts dan @font-face

Muatkan fon luaran daripada Google Fonts atau takrifkan fon tersuai menggunakan peraturan @font-face.

Pelajaran 4 daripada 413 langkah

Google Fonts dan @font-face ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Mengapa Fon Tersuai?

Fon yang selamat untuk web hanya menawarkan beberapa pilihan. Fon tersuai membolehkan anda memadankan identiti jenama dengan tepat. Dua pendekatan utama ialah Google Fonts (perkhidmatan yang dihoskan) dan @font-face (dihoskan sendiri).

Persediaan Google Fonts

Lawati fonts.google.com, pilih keluarga fon, pilih ketebalan, kemudian salin tag <link> ke dalam <head> HTML anda:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Menggunakan Google Fonts dalam CSS

Selepas membuat pautan, rujuk fon mengikut namanya dalam tindanan font-family:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Parameter API Google Fonts

Parameter display=swap menggunakan strategi Pertukaran Paparan Fon — teks dipaparkan dalam fon sandaran dengan serta-merta, kemudian ditukar apabila fon tersuai dimuatkan. Ini menghalang teks daripada tidak kelihatan semasa pemuatan.

Asas @font-face

@font-face membolehkan anda memuatkan fail fon tersuai yang dihoskan sendiri. Takrifkan nama keluarga fon dan sumber fail:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: Format Moden

WOFF2 (Format Fon Terbuka Web 2) ialah format yang disyorkan. Format ini menawarkan pemampatan terbaik (biasanya 30% lebih kecil daripada WOFF) dan disokong oleh semua pelayar moden. Sentiasa sertakan WOFF sebagai sandaran.

Berbilang Ketebalan dengan @font-face

Isytiharkan satu blok @font-face bagi setiap gabungan ketebalan dan gaya. Gunakan nama font-family yang sama supaya pelayar memilih fail yang betul secara automatik:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

Sifat font-display

Penerang font-display mengawal kelakuan pemuatan fon:

swap — paparkan sandaran dengan serta-merta, tukar apabila sedia (disyorkan)
block — teks tidak kelihatan sehingga 3 saat
fallback — sekatan singkat kemudian gunakan sandaran kekal
optional — gunakan hanya jika telah disimpan dalam cache

<p class="swap-text">Text swaps in once Inter loads.</p>

Fon Boleh Ubah @font-face

Fon boleh ubah mentakrifkan julat paksi dan bukannya nilai ketebalan tetap:

<p class="variable-text">Variable weight text (550)</p>

Pramuat Fon Kritikal

Pramuat fail fon yang paling penting untuk mengurangkan kelewatan yang menyekat pemaparan. Tambahkan <link rel="preload"> sebelum helaian gaya:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() untuk Melangkau Muat Turun

Gunakan local() dalam src untuk menyemak sama ada pengguna telah memasang fon tersebut sebelum memuat turunnya:

<p class="roboto-text">Uses local Roboto if installed</p>

Semakan Pantas

Format fon manakah yang memberikan pemampatan terbaik dan sokongan paling meluas dalam pelayar moden?

Jawab dalam pelajaran interaktif

Ringkasan

Google Fonts menyediakan fon yang dihoskan dengan mudah melalui tag <link>. Hoskan fon sendiri dengan @font-face menggunakan format WOFF2 dan font-display: swap untuk prestasi terbaik. Pramuat fon kritikal dan gunakan local() untuk mengelakkan muat turun yang tidak diperlukan.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Google Fonts dan @font-face” percuma?

Ya — teks penuh “Google Fonts dan @font-face” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Google Fonts dan @font-face”?

Muatkan fon luaran daripada Google Fonts atau takrifkan fon tersuai menggunakan peraturan @font-face. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Google Fonts dan @font-face” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy