Bagaimana untuk Menambah Fon pada Projek Cipta-React-Apl Tanpa Mengeluar?

Menambah Fon pada Projek Berdasarkan create-react-app tanpa Mengeluar

Menggunakan saluran paip binaan ialah kaedah yang disyorkan untuk menambah fon pada projek create-react-app. Ini memastikan pemprosesan yang betul, cincang untuk caching penyemak imbas dan pengesanan ralat kompilasi.

1. Menggunakan Import:

   • Import fail CSS daripada JS, seperti src/index.css daripada src/index.js.

   • Fon rujukan dalam fail CSS menggunakan laluan relatif, seperti:

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

2. Menggunakan Folder awam (Tidak Disyorkan):

   • Letakkan fon dalam public/fonts/MyFont.woff.
   • Buat fail CSS dalam folder awam, seperti public/index.css.

   • Tambahkan pautan ke fail CSS ini dalam public/index.html:

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

   • Fon rujukan dalam fail CSS menggunakan fon laluan relatif/MyFont.woff.

Perhatikan bahawa menggunakan kaedah folder awam tidak diutamakan kerana ia tidak memastikan pemprosesan yang betul , pencincangan atau pengesanan ralat. Ia juga lebih terdedah kepada isu caching.

Tidak kira kaedahnya, anda perlu mempunyai fon dalam format yang disokong, seperti WOFF, WOFF2 atau TTF.

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