Bagaimana menghapus kesalahan tentang glyphicons-halflings-regular.woff2 tidak ditemukan

Aplikasi ASP.NET MVC4 Bootstrap 3 berjalan dari Microsoft Visual Studio Express 2013 untuk Web IDE.

Konsol Chrome selalu menampilkan kesalahan

http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

File ini ada di direktori font di Solution Explorer. Tindakan build diatur ke "Konten" dan Salin ke direktori Output adalah "Jangan salin seperti di file font lain". Bootstrap 3 ditambahkan ke solusi menggunakan NuGet. Bagaimana cara mengatasinya agar kesalahan ini tidak terjadi? Aplikasi menunjukkan ikon Glyphicon dan FontAwesome dengan benar. Kesalahan ini selalu terjadi saat memulai aplikasi.

Masalah ini terjadi karena IIS tidak mengetahui tentang woffdan woff2jenis file mime.

Solusi 1:

Tambahkan baris ini di proyek web.config Anda:

 <system.webServer>
  ...
  </modules>
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>

Solusi 2:

Pada halaman proyek IIS:

Langkah 1: Buka halaman beranda IIS proyek Anda dan klik dua kali MIME Typestombol:

Langkah 2: Klik Addtombol dari Actionsmenu:

Langkah 3: Di tengah layar muncul sebuah jendela dan di jendela ini Anda perlu menambahkan dua baris dari solusi 1:

Dalam kasus saya, saya baru saja mengunduh file yang hilang langsung dari sini: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

Tambahkan yang ini ke html Anda jika Anda hanya memiliki akses ke html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Bagi saya, masalahnya ada dua: Pertama, versi IIS yang saya tangani tidak tahu tentang .woff2tipe MIME, hanya tentang .woff. Saya memperbaikinya menggunakan Manajer IIS di tingkat server, bukan di tingkat aplikasi web, sehingga pengaturan tidak akan diganti dengan setiap penerapan aplikasi baru. (Di bawah Manajer IIS, saya pergi ke tipe MIME, dan menambahkan yang hilang .woff2, lalu memperbarui .woff.)

Kedua, dan yang lebih penting, saya membundel bootstrap.cssdengan beberapa file lain sebagai "~/bundles/css/site". Sementara itu, file font saya ada di "~/fonts". bootstrap.cssmencari font glyphicon di "../fonts", yang diterjemahkan ke "~/bundles/fonts"- jalan yang salah.

Dengan kata lain, jalur bundel saya adalah satu direktori terlalu dalam. Saya mengganti namanya menjadi "~/bundles/siteCss", dan memperbarui semua referensi yang saya temukan di proyek saya. Sekarang bootstrap mencari "~/fonts"file glyphicon, yang berfungsi. Masalah terpecahkan.

Sebelum saya tetap masalah kedua di atas, tidak ada satu glyphiconfile font yang memuat. Gejalanya adalah semua contoh glyphiconmesin terbang dalam proyek tersebut hanya menunjukkan kotak kosong. Namun, gejala ini hanya terjadi di versi aplikasi web yang diterapkan, bukan di mesin dev saya. Saya masih tidak yakin mengapa itu terjadi.

Saya mencoba semua saran di atas, tetapi masalah saya yang sebenarnya adalah aplikasi saya mencari folder / font dan isinya (.woff dll) di app / font, tetapi folder / font saya berada pada level yang sama dengan / app. Saya memindahkan / font di bawah / app, dan sekarang berfungsi dengan baik. Saya harap ini membantu orang lain menjelajahi web untuk mendapatkan jawaban.

Masalah ini terjadi karena IIS tidak menemukan yang sebenarnya lokasi dari jenis mime file woff2. Setel URL font-face dengan benar, juga pertahankan font-family sebagai glyphicons-halflings-regular di file CSS Anda seperti yang ditunjukkan di bawah ini.

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}