Bagaimanakah cara saya mengurus fon dengan berkesan dalam aplikasi create-react-tanpa mengeluarkan?

Mengurus Font dalam create-react-app

Apabila menggunakan create-react-app tanpa mengeluarkan, penempatan fon diimport melalui @font -muka boleh mengelirukan. Berikut ialah dua pilihan untuk dipertimbangkan:

Menggunakan Import

Ini ialah pendekatan yang disyorkan kerana ia menyepadukan fon ke dalam saluran paip binaan, memastikan cache penyemak imbas yang betul dan ralat penyusunan jika fail tiada. Import fail CSS daripada fail JavaScript anda, seperti src/index.js mengimport src/index.css. Dalam fail CSS, tentukan peraturan @font-face dengan laluan relatif kepada fail fon dalam direktori src/fonts, cth.:

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

Menggunakan Folder Awam

Walaupun kaedah ini tidak disyorkan, ia melibatkan meletakkan fon dalam folder awam, mis., public/fonts/MyFont.woff. Dalam kes ini, buat fail CSS dalam folder awam, seperti public/index.css dan tambahkan pautan padanya secara manual dalam public/index.html. Dalam fail CSS, gunakan tatatanda CSS biasa dengan laluan relatif kepada fail fon dalam direktori awam/fon, cth.:

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

Walau bagaimanapun, kaedah ini mempunyai kelemahan seperti cincangan yang tiada dan pemindahan, memimpin kepada pemuatan yang lebih perlahan dan potensi caching isu.

Syor

Kaedah pertama, "Menggunakan Import," lebih disukai kerana ia memastikan pengendalian fon yang betul dalam saluran paip binaan dan mengelakkan masalah yang mungkin timbul.

Atas ialah kandungan terperinci Bagaimanakah cara saya mengurus fon dengan berkesan dalam aplikasi create-react-tanpa mengeluarkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!