Cara Menggunakan Font Google dan Font-Desplay

mata teras

Google Fonts adalah platform sumber terbuka percuma yang menyediakan sejumlah besar fon web yang boleh digunakan dalam projek web untuk membuat reka bentuk silang peranti yang indah dan konsisten.
• Sifat -sifat
• adalah kunci untuk menggunakan font Google, yang mengawal tingkah laku rendering fon semasa memuatkan dan mengoptimumkan pengalaman pengguna dengan mengurangkan kesan pemuatan fon perlahan. font-display
Terdapat dua cara utama untuk menambah fon Google ke projek: menghubungkan dan mengimport. Kedua -dua kaedah melibatkan memilih fon yang dikehendaki dari laman web Google Fonts dan menambah kod yang disediakan ke fail HTML atau CSS.
• Atribut
• mempunyai lima nilai yang mungkin (auto, blok, swap, swapback, pilihan), yang menentukan bagaimana fon diberikan semasa pemuatan, yang membolehkan pengalaman pengguna tersuai. font-display

Tutorial ini akan meneroka cara menggunakan sifat Google Fonts dan

. font-display

Google Fonts adalah platform sumber terbuka percuma yang menyediakan perpustakaan besar fon web. Sebagai pemaju web, mengintegrasikan fon ini ke dalam projek anda adalah penting untuk membuat laman web yang secara visual menarik dan direka secara konsisten merentasi pelbagai peranti. Aspek utama menggunakan fon Google dengan berkesan adalah memahami atribut

, yang menentukan bagaimana fon diberikan semasa memuatkan. font-display

kami akan merangkumi topik berikut:

Apa itu font Google?
Apa itu ? font-display Cara Menambah Font Google ke Projek Anda
2. Pautan Google Fonts
   Import Google Fonts
memahami pelbagai
3. nilai font-display
   Auto
   blok
   swap
   Fallback
   Pilihan
pelaksanaan dengan Google Fonts
4. Properties font-display
   cara menggunakan pautan
   menggunakan
   • kaedah @import
Penyelesaian masalah Soalan Lazim
5. Masalah: Fon tersuai tidak dapat memuatkan atau memaparkan
   Masalah: Teks yang tidak kelihatan Flashing (FOIT) atau Teks Non-Style Flashing (FOUT)
   Masalah: Rendering font yang tidak konsisten merentasi pelayar

Apakah font Google?

Google Fonts adalah perpustakaan lebih daripada 1,000 keluarga fon berlesen percuma yang disediakan oleh Google. Fon ini boleh dengan mudah tertanam ke dalam laman web anda untuk membuat rupa yang unik, profesional dan konsisten. Font Google dioptimumkan untuk prestasi dan kebolehaksesan, menjadikannya pilihan yang ideal untuk pembangunan web.

Apa itu sifat? font-display Hartanah

adalah fungsi CSS yang mengawal tingkah laku rendering fon semasa memuatkan. Ia menentukan berapa lama penyemak imbas harus menunggu font dimuat sebelum memaparkan fon alternatif atau teks dengan aksara yang tidak kelihatan. Dengan menggunakan atribut font-display, anda boleh mengoptimumkan pengalaman pengguna dengan mengurangkan kesan pemuatan fon perlahan pada reka bentuk dan prestasi laman web. font-display

Cara Menambah Font Google ke Projek Anda

Terdapat dua cara utama untuk menambah fon Google ke projek anda: menghubungkan dan mengimport.

Pautan Google Fonts

Pautan adalah cara yang paling biasa untuk menambah fon Google ke projek anda. Untuk melakukan ini, ikuti langkah -langkah ini:

1. Dapatkan laman web Google Fonts.
2. Semak imbas atau cari fon yang anda mahu gunakan.
3. Klik pada font untuk membuka halaman butirannya.
4. Pilih gaya fon dan ketebalan yang anda perlukan dengan mengklik kotak semak atau menggunakan slider.
5. Klik butang "Pilih Gaya Ini" untuk menambah gaya font yang dipilih ke koleksi anda.
6. Buka tab Embed dan anda akan melihat tag pautan yang boleh anda tambahkan ke bahagian tajuk fail HTML.

Contohnya, untuk menambah font "roboto", tag pautan akan kelihatan seperti ini:

<code class="language-html"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"></code>

Import Google Fonts

Sebagai alternatif, anda boleh mengimport fon Google menggunakan peraturan

dalam fail CSS. Untuk melakukan ini, ikuti langkah -langkah ini: @import

Ikuti langkah 1-5 dalam kaedah pautan.
Dalam tab Embed, beralih ke tab @import.
Salin coretan kod yang disediakan dan tampalkannya di atas fail CSS.
Contohnya, untuk mengimport fon "roboto", peraturan

akan kelihatan seperti ini:

@import

<code class="language-css">@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');</code>

memahami pelbagai

nilai font-display Atribut

mempunyai lima nilai yang mungkin, masing -masing dengan tingkah laku rendering yang berbeza:

font-display

Auto

• blok
• swap
• Fallback
• Pilihan
Auto

Nilai meninggalkan tingkah laku rendering fon ke tetapan lalai penyemak imbas. Pilihan ini boleh menyebabkan penyebaran yang tidak konsisten antara penyemak imbas yang berbeza:

auto

blok

<code class="language-css">font-display: auto;</code>

Nilai menunjukkan bahawa penyemak imbas pada mulanya menyembunyikan teks dan menunggu font dimuatkan. Jika fon tidak dimuatkan untuk jangka masa yang singkat, penyemak imbas akan memaparkan fon alternatif. Selepas fon tersuai dimuatkan, penyemak imbas akan menukar teks untuk menggunakan fon tersuai. Kaedah ini boleh menyebabkan "teks yang tidak dapat dilihat" (FOIT) sambil menunggu font dimuat:

block

swap

<code class="language-css">font-display: block;</code>

Nilai memberitahu penyemak imbas untuk memaparkan teks dengan serta -merta menggunakan fon alternatif dan beralih ke fon tersuai selepas memuatkan font tersuai. Kaedah ini boleh menyebabkan "kelip-kelip teks bukan gaya" (FOUT), tetapi memastikan pengguna dapat melihat teks dari awal:

swap

Fallback

<code class="language-css">font-display: swap;</code>

Nilai adalah gabungan

dan

. Pelayar pada mulanya menyembunyikan teks secara ringkas (biasanya kira -kira 100 milisaat). Jika fon tersuai dimuatkan dalam masa ini, penyemak imbas akan memaparkannya. Jika tidak, ia akan memaparkan fon alternatif. Selepas tempoh masa yang lebih lama (biasanya kira -kira tiga saat), jika fon tersuai masih tidak dimuatkan, penyemak imbas akan menyerah dan terus menggunakan font alternatif:

<code class="language-html"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"></code>

Pilihan

Jika fon tersuai tidak dimuatkan untuk masa yang singkat ini (bergantung kepada penyemak imbas), penyemak imbas akan menyerah dan terus menggunakan font alternatif. Pendekatan ini mengutamakan pengalaman dan prestasi pengguna melalui rendering font yang tepat: optional fallback

<code class="language-css">@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');</code>

pelaksanaan dengan Google Fonts

Properties font-display Font Google membolehkan anda menetapkan nilai

secara langsung dalam pautan atau dalam url

. Untuk melakukan ini, ikuti salah satu pilihan berikut. @import font-display cara menggunakan pautan

Ikuti langkah 1-6 di bahagian pautan di atas.

• Dalam tab Embed, cari bahagian Penyesuaian.
• Dalam menu drop-down "Font-Display", pilih nilai
yang dikehendaki.
• Tag pautan font-display akan dikemas kini dengan nilai
yang dipilih. Tambah tag pautan yang dikemas kini ke bahagian tajuk fail HTML.
• font-display
contohnya, untuk menambah font "roboto" dengan

nilai

: font-display swap

menggunakan

<code class="language-css">font-display: auto;</code>

kaedah

@import

Menurut langkah 1-3 kaedah import di atas.

• Dalam tab Embed, cari bahagian Penyesuaian.
• Dalam menu drop-down "Font-Display", pilih nilai
yang dikehendaki.
• Peraturan font-display
akan dikemas kini dengan nilai
• yang dipilih. Tambah peraturan @import yang dikemas kini ke fail CSS anda. font-display @import
contohnya, untuk mengimport font "roboto" dengan

nilai

: font-display swap

<code class="language-css">font-display: block;</code>

Penyelesaian masalah Soalan Lazim

Berikut adalah beberapa masalah dan penyelesaian biasa apabila menggunakan font Google dan

sifat.

Masalah: Fon tersuai tidak dapat memuatkan atau memaparkan

• Pastikan anda telah menambahkan tag pautan atau @import dengan betul ke fail HTML atau CSS.
• Semak URL salah eja atau salah dalam pautan atau @import kod.
• Sahkan bahawa nama dan ketebalan keluarga fon yang betul digunakan dalam peraturan CSS.

Masalah: Teks yang tidak kelihatan Flashing (FOIT) atau Teks Non-Style Flashing (FOUT)

• Pilih nilai font-display yang berbeza untuk memenuhi keperluan anda dengan lebih baik. Sebagai contoh, jika anda menghadapi foit, cuba swap atau fallback. Sekiranya anda menghadapi Fout, pertimbangkan untuk menggunakan block atau fallback.
• Pastikan fon tersuai anda muat seawal mungkin semasa memuatkan halaman dengan meletakkan pautan atau kod @import berhampiran bahagian header atau berhampiran bahagian atas fail CSS.
• Mengoptimumkan saiz fail fon dengan memilih hanya gaya fon yang diperlukan dan ketebalan.

Masalah: Rendering font yang tidak konsisten merentasi pelayar

• Tetapkan nilai font-display spesifik dan bukannya menggunakan nilai auto untuk memastikan tingkah laku yang konsisten merentasi pelayar yang berbeza.
• Uji laman web anda pada pelbagai pelayar untuk mengenal pasti sebarang masalah rendering dan membuat pelarasan yang diperlukan untuk CSS anda.

Kesimpulan

Dalam artikel ini, kami meneroka cara menggunakan Font Google dan font-display sifat untuk membuat laman web yang menarik dan berprestasi tinggi. Dengan memahami nilai -nilai font-display yang berbeza dan makna mereka, anda boleh mengoptimumkan rendering fon untuk meningkatkan pengalaman pengguna. Pastikan untuk menguji pelaksanaan anda pada pelbagai pelayar dan peranti untuk memastikan konsistensi dalam penampilan dan prestasi.

sebagai pemaju web, mengintegrasikan sifat Google Fonts dan font-display ke dalam projek anda akan membolehkan anda membuat reka bentuk profesional dan boleh diakses yang memenuhi keperluan pelbagai pengguna.

(berikut adalah FAQ, yang telah ditulis semula dan diselaraskan mengikut teks asal)

Soalan Lazim Mengenai Menggunakan Google Fonts

• Bagaimana untuk mengoptimumkan fon Google untuk meningkatkan prestasi tapak? anda boleh menggunakan atribut font-display (contohnya, nilai swap), atau pertimbangkan fon yang diuruskan secara tempatan untuk mengurangkan permintaan HTTP.

• Apakah faedah menggunakan font Google? Google Fonts menawarkan pelbagai fon sumber terbuka yang mudah digunakan, dihoskan oleh Google, cepat dan boleh dipercayai, dan dioptimumkan untuk platform desktop dan mudah alih.

• Bagaimana untuk menambah font Google ke laman WordPress anda? Font Google boleh ditambah dengan mudah dan disesuaikan menggunakan plugin WordPress seperti "Swap Google Font Display" atau "Plugin Fonts".

• Bagaimana menggunakan font Google dalam CSS? Pilih font di laman web Google Fonts, salin tag pautan yang disediakan ke bahagian dari fail HTML, dan tambahkan peraturan CSS ke fail CSS anda.

• Bolehkah anda menggunakan Google Fonts di luar talian? fail fon boleh dimuat turun dan digunakan secara tempatan, tetapi hanya untuk tujuan peribadi.

• Bagaimana cara menukar paparan fon di font Google? Gunakan harta font-display dalam CSS.

• Adakah font Google serasi dengan semua pelayar? serasi dengan pelayar yang paling moden, tetapi pelayar yang lebih tua mungkin tidak menyokong ciri atau fon tertentu.

• Bagaimana untuk mencari fon Google terbaik untuk laman web saya? Laman web Google Fonts menyediakan fungsi penapisan, penapisan fon mengikut kategori, bahasa dan atribut lain, dan boleh dipratonton.

• Bolehkah anda menggunakan pelbagai fon Google di laman web saya? Ya, tetapi setiap fon akan meningkatkan masa pemuatan, dan disyorkan untuk mengehadkan nombor.

• Bagaimana untuk mengemas kini font Google di laman web anda? Google Fonts dihoskan oleh Google dan akan dikemas kini secara automatik. Jika dihoskan secara tempatan, anda perlu mengemas kini secara manual.

Atas ialah kandungan terperinci Cara Menggunakan Font Google dan Font-Desplay. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!