Font Google Nunito Sans Sans untuk kegagalan berat badan fon

Artikel ini bertujuan untuk menyelesaikan masalah bahawa tetapan ketebalan fon yang berbeza gagal apabila mengimport fon nunito sans menggunakan fon Google. Inti adalah untuk mengkonfigurasi parameter berat fon (WGHT) dengan betul dalam pautan import Google Fonts untuk memastikan semua ketebalan dan gaya nipis yang diperlukan diminta dengan betul, dengan itu mencapai kesan visual yang diharapkan.

Penerangan Masalah

Apabila mengimport fon Nunito SANS menggunakan fon Google, pemaju mungkin menghadapi masalah biasa: walaupun nilai-nilai font yang berbeza ditetapkan untuk unsur-unsur teks yang berbeza, seperti perenggan, unsur-unsur ini akhirnya menunjukkan berat fon yang sama. Ini biasanya berlaku apabila fon lain berfungsi secara normal, tetapi fon unik mempunyai keabnormalan.

Sebagai contoh, kod CSS berikut cuba menetapkan berat fon yang berbeza untuk tiga perenggan:

 p {
  Font-keluarga: 'Nunito Sans', Sans-Serif;
  saiz font: 32px;
}

.p1 {
  Font-Weight: 300; /* semestinya baik*/
}

.p2 {
  Font-Weight: 600; /* harus separa berani*/
}

.p3 {
  Font-Weight: 800; /* mesti berada dalam keadaan berani khas*/
}

Struktur HTML yang sepadan adalah seperti berikut:

 <p class="p1"> harus cahaya (300) </p>
<p class="p2"> harus semibold (600) </p>
<p class="p3"> harus extrabold (800) </p>

Walau bagaimanapun, dalam rendering sebenar, .p1 dan .p2 mungkin muncul sebagai ketebalan yang sama, sementara hanya .p3 boleh muncul sebagai gaya tebal dengan betul.

Analisis punca utama masalah

Penyebab utama masalah ini biasanya kerana konfigurasi pautan import Google Fonts tidak lengkap atau tidak tepat. API Google Fonts V2 membolehkan kawalan tepat paksi gaya fon yang diimport melalui parameter URL, seperti WGHT (berat, berat fon) dan italik (italik, italik). Sekiranya pautan import tidak secara eksplisit meminta semua berat fon yang dikehendaki (terutamanya gaya tegak), penyemak imbas itu kembali kepada berat badan yang paling dekat atau lalai apabila cuba memohon berat font yang tidak tercatat, mengakibatkan kesan visual yang tidak konsisten.

Dalam senario masalah di atas, pautan import Google Fonts yang asal mungkin kelihatan seperti:

 <link href="https://fonts.googleapis.com/css2?family=nunito%20sans:%20ital,%20wght@0,600;%200,800;%201,300%20&%20paparan%20=%20swap" rel="stylesheet">

Berhati -hati menganalisis pautan ini: ital, wght@0,600; 0,800; 1,300. Ia diminta:

• 0,600: gaya tegak (bukan akan), ketebalan 600.
• 0,800: gaya tegak (bukan akan), ketebalan 800.
• 1,300: Gaya Italic, ketebalan 300.

Masalahnya ialah ia tidak meminta fon dengan ketebalan 300 gaya tegak (bukan akan). Oleh itu, apabila .p1 cuba memohon font-berat: 300 ke teks tegak, kerana gaya 0,300 tidak diimport, penyemak imbas sandaran ke berat badan yang terdekat, 600, menyebabkan .p1 dan .p2 muncul sebagai berat yang sama.

Penyelesaian

Kunci untuk menyelesaikan masalah ini adalah untuk mengubah suai pautan import Google Fonts untuk memastikan bahawa semua ketebalan fon yang diperlukan (terutamanya gaya tegak) diminta dan diimport secara eksplisit. Oleh kerana matlamat kami adalah untuk menetapkan berat 300, 600 dan 800 untuk teks tegak, kami dapat memudahkan pautan import, hanya fokus pada paksi WGHT, dan menyenaraikan semua nilai berat sasaran.

Pautan Import Google Fonts yang Diperbeting:

 <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=nunito%20sans:%20wght@300;%20600;%20800%20&%20paparan%20=%20swap" rel="stylesheet">

Keluarga pautan ini = nunito sans: wght@300; 600; 800 & paparan = swap secara eksplisit meminta tiga gaya ketebalan nunito sans fon, 300, 600 dan 800 pada paksi wght. Dengan cara ini, penyemak imbas boleh memuatkan dengan betul dan menggunakan ketebalan fon yang berbeza ini.

Contoh kod yang disemak semula

Selepas mengubah suai pautan import Google Font, kod CSS dan HTML yang asal akan berfungsi dengan normal, mencapai kesan ketebalan fon yang dijangkakan.

Bahagian 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=nunito%20sans:%20wght@300;%20600;%20800%20&%20paparan%20=%20swap" rel="stylesheet">

<p class="p1"> harus cahaya (300) </p>
<p class="p2"> harus semibold (600) </p>
<p class="p3"> harus extrabold (800) </p>

Bahagian CSS (kekal tidak berubah):

 p {
  Font-keluarga: 'Nunito Sans', Sans-Serif;
  saiz font: 32px;
}

.p1 {
  Font-Weight: 300; /* Kini harus dipaparkan dengan betul sebagai badan nipis*/
}

.p2 {
  Font-Weight: 600; /* sekarang harus dipaparkan dengan betul dalam separuh tebal*/
}

.p3 {
  Font-Weight: 800; / * Ia kini harus dipaparkan dengan berani khas */
}

Perkara yang perlu diperhatikan

1. Semak URL yang dihasilkan oleh Google Fonts: Ia sentiasa disyorkan untuk memilih gaya font yang anda mahu (termasuk semua ketebalan dan varian italic) di laman web Google Fonts dan salin tag yang dihasilkannya. Ini meminimumkan kesilapan sintaks atau ketinggalan apabila membina URL secara manual.
2. Memahami parameter WGHT dan Ital: WGHT digunakan untuk menentukan ketebalan fon, dan ital digunakan untuk menentukan italik. Sekiranya anda perlu menyokong pelbagai ketebalan tegak dan huruf miring pada masa yang sama, anda perlu menggunakan paksi ital, wght dan menentukannya dalam nilai -nilai, contohnya ital, wght@0,300; 0,600; 1,300 bermaksud tegak 300, tegak 600 dan miring 300.
3. Cache Penyemak Imbas: Selepas membuat perubahan pada pautan import fon, jika kesannya tidak muncul dengan serta -merta, cuba membersihkan cache penyemak imbas atau menggunakan mod incognito untuk mengujinya untuk menyelesaikan masalah caching.
4. Import atas permintaan: Walaupun mengimport semua kemungkinan fon yang mungkin dapat mengelakkan masalah tersebut, untuk mengoptimumkan prestasi pemuatan halaman web, disyorkan untuk mengimport hanya berat fon dan gaya yang sebenarnya akan digunakan.

Meringkaskan

Apabila mengimport fon menggunakan fon Google, adalah penting untuk memastikan bahawa semua ketebalan dan gaya fon yang dikehendaki dimasukkan dengan betul dalam pautan import. Inti masalah dengan kegagalan berat badan Nunito Sans adalah bahawa pautan import asal gagal meminta semua berat fon tegak yang diperlukan. Masalah ini dapat diselesaikan dengan berkesan dengan membetulkan pautan import fon Google dan dengan jelas menentukan semua nilai ketebalan sasaran pada paksi WGHT untuk memastikan gaya fon web dapat diberikan dengan tepat.

Atas ialah kandungan terperinci Font Google Nunito Sans Sans untuk kegagalan berat badan fon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!