วิธีลบข้อผิดพลาดเกี่ยวกับ glyphicons-halflings-regular.woff2 ไม่พบ

แอปพลิเคชัน ASP.NET MVC4 Bootstrap 3 กำลังทำงานจาก Microsoft Visual Studio Express 2013 สำหรับ Web IDE

คอนโซล Chrome แสดงข้อผิดพลาดเสมอ

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

ไฟล์นี้มีอยู่ในไดเร็กทอรีฟอนต์ใน Solution Explorer การดำเนินการสร้างถูกตั้งค่าเป็น "เนื้อหา" และไดเร็กทอรีคัดลอกไปยังเอาต์พุตคือ "ห้ามคัดลอกเหมือนในไฟล์ฟอนต์อื่น ๆ " Bootstrap 3 ถูกเพิ่มเข้าไปในโซลูชันโดยใช้ NuGet จะแก้ไขอย่างไรไม่ให้เกิดข้อผิดพลาดนี้ แอปพลิเคชันแสดงไอคอน Glyphicon และ FontAwesome อย่างถูกต้อง ข้อผิดพลาดนี้มักเกิดขึ้นเมื่อเริ่มต้นแอปพลิเคชัน

ปัญหานี้เกิดขึ้นเนื่องจาก IIS ไม่ทราบเกี่ยวกับwoffและ woff2ประเภท mime ของไฟล์

แนวทางที่ 1:

เพิ่มบรรทัดเหล่านี้ในโปรเจ็กต์ web.config ของคุณ:

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

แนวทางที่ 2:

ในหน้าโครงการ IIS:

ขั้นตอนที่ 1:ไปที่โฮมเพจ IIS โครงการของคุณและดับเบิลคลิกที่MIME Typesปุ่ม:

ขั้นตอนที่ 2:คลิกที่Addปุ่มจากActionsเมนู:

ขั้นตอนที่ 3:กลางหน้าจอจะปรากฏหน้าต่างและในหน้าต่างนี้คุณต้องเพิ่มสองบรรทัดจากโซลูชัน 1:

ในกรณีของฉันฉันเพิ่งดาวน์โหลดไฟล์ที่หายไปโดยตรงจากที่นี่: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

เพิ่มสิ่งนี้ลงใน html ของคุณหากคุณสามารถเข้าถึง html ได้เท่านั้น:

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

สำหรับผมแล้วปัญหาอยู่สองอย่างคือ: First, รุ่นของ IIS ผมก็จัดการกับไม่เคยรู้เกี่ยวกับชนิดไมม์เพียงประมาณ.woff2 .woffฉันแก้ไขโดยใช้ IIS Manager ที่ระดับเซิร์ฟเวอร์ไม่ใช่ที่ระดับเว็บแอปดังนั้นการตั้งค่าจะไม่ถูกแทนที่ด้วยการปรับใช้แอปใหม่แต่ละครั้ง (ภายใต้ตัวจัดการ IIS ฉันไปที่ประเภท MIME และเพิ่มสิ่งที่ขาดหายไป.woff2จากนั้นอัปเดต.woff)

ประการที่สองและที่สำคัญกว่านั้นคือฉันรวมbootstrap.cssไฟล์พร้อมกับไฟล์อื่น ๆ เป็นไฟล์"~/bundles/css/site". ในขณะเดียวกันไฟล์แบบอักษรของฉันอยู่ใน"~/fonts". bootstrap.cssมองหาแบบอักษร glyphicon "../fonts"ซึ่งแปลเป็น"~/bundles/fonts"- เส้นทางที่ไม่ถูกต้อง

กล่าวอีกนัยหนึ่งเส้นทางบันเดิลของฉันมีไดเร็กทอรีหนึ่งที่ลึกเกินไป ฉันเปลี่ยนชื่อเป็น"~/bundles/siteCss"และอัปเดตการอ้างอิงทั้งหมดที่ฉันพบในโครงการของฉัน ตอนนี้ bootstrap มอง"~/fonts"หาไฟล์ glyphicon ซึ่งใช้งานได้ แก้ไขปัญหา.

ก่อนที่ผมจะได้รับการแก้ไขปัญหาที่สองข้างต้นไม่มีของglyphiconไฟล์ font มีการโหลด อาการคือทุกกรณีของglyphiconร่ายมนตร์ในโปรเจ็กต์แสดงเพียงกล่องเปล่า อย่างไรก็ตามอาการนี้เกิดขึ้นเฉพาะในเว็บแอปเวอร์ชันที่ปรับใช้แล้วไม่ใช่ในเครื่อง dev ของฉัน ฉันยังไม่แน่ใจว่าทำไมถึงเป็นเช่นนั้น

ฉันลองทำตามคำแนะนำทั้งหมดข้างต้น แต่ปัญหาที่แท้จริงของฉันคือแอปพลิเคชันของฉันกำลังมองหาโฟลเดอร์ / font และเนื้อหา (.woff ฯลฯ ) ในแอพ / ฟอนต์ แต่โฟลเดอร์ / ฟอนต์ของฉันอยู่ในระดับเดียวกับ / app ฉันย้าย / แบบอักษรภายใต้ / แอปและตอนนี้ใช้งานได้ดี ฉันหวังว่านี่จะช่วยให้ผู้อื่นได้รับคำตอบในการท่องเว็บ

ปัญหานี้เกิดขึ้นเนื่องจาก IIS ไม่หาสิ่งที่เกิดขึ้นจริง ที่ตั้งประเภทละครใบ้ไฟล์ woff2 ตั้งค่า URL ของแบบอักษรให้ถูกต้องและให้ตระกูลแบบอักษรเป็นglyphicons-halflings-regularในไฟล์ CSS ของคุณดังที่แสดงด้านล่าง

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