Bagaimana untuk Menggunakan Fon dalam Apl Cipta-Reaksi Tanpa Mengeluar?

Cara Menggabungkan Fon ke dalam Projek Cipta-React-Apl Tanpa Ejection

Untuk menggunakan fon dalam projek cipta-reaksi-apl tanpa keperluan untuk lonjakan, terdapat dua pilihan utama yang tersedia:

Kaedah 1: Menggunakan Import

Pendekatan ini melibatkan pengimportan fail CSS ke dalam kod JavaScript anda. Secara lalai, src/index.js merujuk kepada src/index.css. Masukkan fon anda ke dalam fail CSS ini menggunakan laluan relatif bermula dengan ./:

<code class="css">@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}</code>

Kaedah 2: Menggunakan Folder Awam

Jika anda memilih untuk tidak menggunakan membina saluran paip, anda boleh memilih pendekatan folder awam. Letakkan fon anda dalam direktori awam/fon:

public/fonts/MyFont.woff

Buat fail CSS dalam folder awam, seperti public/index.css dan pautkannya secara manual dalam public/index.html:

<code class="html"><link rel="stylesheet" href="%PUBLIC_URL%/index.css"></code>

Inside public/index.css:

<code class="css">@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}</code>

Syor

Kaedah awal, memanfaatkan import, amat disyorkan kerana ia memberikan akses kepada ciri seperti memastikan fon melalui saluran paip binaan, memperoleh cincang semasa penyusunan untuk caching penyemak imbas yang cekap dan menerima makluman kompilasi jika fail tiada.

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Fon dalam Apl Cipta-Reaksi Tanpa Mengeluar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!