Apakah yang perlu saya lakukan jika ikon fon tidak dipaparkan selepas uniapp dibungkus?

Dalam beberapa tahun kebelakangan ini, dengan pembangunan berterusan teknologi bahagian hadapan, ikon fon, sebagai penyelesaian ikon ringan, telah digunakan secara meluas dalam reka bentuk web dan mudah alih. Apabila menggunakan uniapp untuk membangunkan aplikasi mudah alih, kami juga boleh menggunakan ikon fon dengan mudah, tetapi selalunya terdapat masalah bahawa ikon fon tidak dapat dipaparkan dengan betul selepas pembungkusan. Hari ini, kita akan membincangkan sebab dan penyelesaian mengapa ikon fon tidak dipaparkan selepas uniapp dibungkus.

Analisis sebab

1. Fail fon tidak berjaya dimuatkan

Pertama sekali, kita perlu memahami bahawa uniapp akan menghasilkan direktori dist selepas pembungkusan, dan kandungan dalam direktori ini adalah aplikasi Terbitan terakhir kami termasuk pelbagai fail sumber dan fail HTML. Apabila kami menggunakan ikon fon, kami sebenarnya menggunakan gaya CSS dalam fail HTML dan menetapkan sumber data kepada fail fon ikon fon, jadi masalah mungkin berlaku dalam fail HTML atau fail fon.

Situasi yang paling biasa ialah fail fon tidak berjaya dimuatkan, menyebabkan ikon fon tidak dipaparkan. Anda boleh melihat output konsol melalui alat pembangun F12 Jika terdapat ralat 404 atau rangkaian dan fail fon berada dalam status permintaan yang gagal, ia boleh ditentukan bahawa fail fon tidak berjaya dimuatkan.

2. Ralat alamat

Kemungkinan lain ialah alamat yang kami perkenalkan fon adalah salah Kerana uniapp menggunakan laluan relatif untuk memperkenalkan fail sumber, anda perlu memastikan bahawa fail HTML dan fon fail berada dalam fail yang sama. Jika ralat laluan fail berlaku, ikon fon tidak akan dipaparkan dengan betul. Begitu juga, anda boleh menentukan sama ada terdapat ralat laluan melalui output konsol.

Penyelesaian

1. Tambahkan sumber fon tempatan

Jika fail fon tidak berjaya dimuatkan, kami boleh cuba menambah fail fon pada sumber tempatan dan kemudian menambahkannya ke fail HTML Gunakan laluan relatif setempat untuk rujukan.

1. Buat folder fonts baharu dalam direktori akar projek dan ekstrak fail fon yang dimuat turun ke dalam folder ini.

2. Masukkan fail uni.scss dan import fail fon, seperti yang ditunjukkan di bawah:

   @font-face{
       font-family:'iconfont';
       src:url(../fonts/iconfont.ttf) format('truetype');
   }

   Perlu diingatkan di sini bahawa nama @font-face dalam font-family perlu sama seperti yang digunakan dalam HTML Nama fon kekal konsisten.

3. Gunakan ikon fon dalam fail HTML, seperti yang ditunjukkan di bawah:

   <i class="uni-icon uni-icon-wode"></i>

   Di sini uni-icon-wode ialah nama kelas ikon yang kami sesuaikan dalam fail fon , dan uni-icon ialah kelas asas yang ditakrifkan dalam uni.scss.

Jika kaedah ini menyelesaikan masalah ikon fon tidak dapat dipaparkan, maka tahniah, masalah telah selesai. Walau bagaimanapun, kadangkala walaupun kita telah mengikuti kaedah di atas, ikon fon masih tidak dapat dipaparkan secara normal Dalam kes ini, anda boleh mencuba kaedah berikut.

2. Gunakan cdn

Kadang-kadang kita dapati rujukan tempatan fail fon gagal, maka kita boleh mempertimbangkan untuk menggunakan cdn untuk menyelesaikan masalah. Walau bagaimanapun, apabila menggunakan CDN, kami perlu memastikan bahawa alamat CDN yang kami perkenalkan adalah betul, dan memandangkan alamat CDN mungkin dipengaruhi oleh rangkaian, adalah lebih baik untuk menyediakan berbilang alternatif. Kaedah pengubahsuaian adalah seperti berikut:

1. Dalam fail manifest.json, tambahkan alamat sumber fail fon, seperti yang ditunjukkan di bawah:

   "networkTimeout": {
      "request": 5000,
      "downloadFile": 10000
   },
      "onDemandResourceRules": [
      {
         "host": "xxxxx.com",
         "files": [
            "/fonts/iconfont.ttf"
         ]
      }
   ],
   "preloadRule": {
      "async": [
         {"path": "xxxxx.com/fonts/iconfont.ttf"}
      ],
      "sync": [
      ]
   }

   di mana xxxxx.com adalah apa yang kami nyatakan Nama domain cdn.

2. Gunakan alamat cdn dalam fail uni.scss, seperti yang ditunjukkan di bawah:

   @font-face{
       font-family:'iconfont';
       src:url(//xxxxx.com/fonts/iconfont.ttf) format('truetype');
   }

   // di sini bermaksud laluan relatif dengan protokol yang sama digunakan, terpakai Untuk http, https, dsb.

3. Gunakan ikon fon dalam fail HTML seperti berikut:

   <i class="uni-icon uni-icon-wode"></i>

   Begitu juga, uni-icon-wode di sini ialah ikon yang kami suaikan dalam fail fon Nama kelas .

Perlu diambil perhatian bahawa menggunakan CDN juga mungkin menghadapi masalah lain, seperti sambungan tidak stabil, fail melebihi had cache, dsb., jadi anda perlu melakukan lebih banyak ujian dan pelan sandaran.

Secara amnya, ikon fon ialah penyelesaian ikon yang baik dan ringan apabila menggunakan uniapp untuk membangunkan aplikasi mudah alih, tetapi disebabkan isu seperti kerumitan pembungkusan dan cara sumber dikendalikan, mungkin terdapat situasi di mana ikon fon tidak boleh dipaparkan dengan betul. Kedua-dua kaedah di atas boleh membantu kami menyelesaikan masalah ini dan menjadikan aplikasi kami lebih cantik dan praktikal.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika ikon fon tidak dipaparkan selepas uniapp dibungkus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!