ฉันใช้@font-faceเว็บไซต์ของ บริษัท และใช้งานได้ / ดูดี ยกเว้น Firefox และ Chrome จะโยนข้อผิดพลาด 404 ลงใน.woffไฟล์ IE ไม่ทิ้งข้อผิดพลาด ฉันมีแบบอักษรอยู่ที่รูท แต่ฉันได้ลองกับแบบอักษรในโฟลเดอร์ css และให้ URL ทั้งหมดสำหรับแบบอักษร หากลบแบบอักษรเหล่านั้นออกจากไฟล์ css ของฉันฉันจะไม่ได้รับ 404 ดังนั้นฉันรู้ว่าไม่ใช่ข้อผิดพลาดทางไวยากรณ์

นอกจากนี้ฉันใช้เครื่องมือ fontsquirrels เพื่อสร้าง@font-faceแบบอักษรและรหัส:

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}

ฉันพบอาการเดียวกันนี้ - 404 ในไฟล์ woff ใน Chrome - และกำลังเรียกใช้แอปพลิเคชันบน Windows Server ที่มี IIS 6

หากคุณอยู่ในสถานการณ์เดียวกันคุณสามารถแก้ไขได้โดยทำสิ่งต่อไปนี้:

โซลูชันที่ 1

"เพียงเพิ่มการประกาศประเภท MIME ต่อไปนี้ผ่านทาง IIS Manager (แท็บส่วนหัว HTTP ของคุณสมบัติเว็บไซต์): .woff application / x-woff "

อัปเดต:ตามMIME Types สำหรับฟอนต์ woffและGrsmสำหรับประเภท MIME จริงคือapplication / x-font-woff (สำหรับ Chrome อย่างน้อย) x-woff จะแก้ไข Chrome 404s และ x-font-woff จะแก้ไขคำเตือนของ Chrome

ในฐานะที่เป็น 2017 : แบบอักษร WOFF ขณะนี้ได้มีมาตรฐานเป็นส่วนหนึ่งของข้อกำหนด RFC8081กับชนิดไมม์และfont/wofffont/woff2

ขอบคุณ Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis

โซลูชันที่ 2

คุณยังสามารถเพิ่มประเภท MIME ในการกำหนดค่าเว็บ :

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

คำตอบสำหรับโพสต์นี้มีประโยชน์มากและประหยัดเวลาได้มาก อย่างไรก็ตามฉันพบว่าเมื่อใช้FontAwesome 4.50งานฉันต้องเพิ่มการกำหนดค่าเพิ่มเติมสำหรับwoff2ประเภทของส่วนขยายดังที่แสดงไว้ด้านล่างคำขอwoff2ประเภทอื่นมีข้อผิดพลาด 404 ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome ภายใต้คอนโซล> ข้อผิดพลาด

ตามความคิดเห็นโดย S.Serp การกำหนดค่าด้านล่างควรอยู่ใน<system.webServer>แท็ก

<staticContent>
  <remove fileExtension=".woff" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".woff2" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>

ที่จริงคำตอบ @Ian Robinson ใช้งานได้ดี แต่ Chrome จะบ่นต่อไปว่า: " ทรัพยากรตีความเป็นแบบอักษร แต่ถ่ายโอนด้วยแอปพลิเคชันประเภท MIME / x-woff "

ถ้าคุณเข้าใจคุณสามารถเปลี่ยนจาก

แอพลิเคชัน / x-WOFF

ถึง

แอปพลิเคชัน / x -font -woff

และคุณจะไม่มีข้อผิดพลาดของคอนโซล Chrome อีกต่อไป!

(ทดสอบบน Chrome 17)

โซลูชันสำหรับ IIS7

ฉันยังเจอปัญหาเดียวกัน ฉันคิดว่าการกำหนดค่านี้จากระดับเซิร์ฟเวอร์จะดีกว่าเนื่องจากใช้กับเว็บไซต์ทั้งหมด

1. ไปที่โหนดรูท IIS และดับเบิลคลิกที่ตัวเลือกการกำหนดค่า "ประเภท MIME"

2. คลิกลิงก์ "เพิ่ม" ในแผงการกระทำที่ด้านบนขวา

3. สิ่งนี้จะทำให้เกิดการโต้ตอบ เพิ่มนามสกุลไฟล์. woff และระบุ "application / x-font-woff" เป็นประเภท MIME ที่สอดคล้องกัน

เพิ่มประเภท MIME สำหรับนามสกุลไฟล์. woff

นี่คือสิ่งที่ฉันทำเพื่อแก้ไขปัญหาใน IIS 7

นอกจากคำตอบของเอียนฉันต้องอนุญาตให้ส่วนขยายแบบอักษรในโมดูลการกรองคำขอเพื่อให้ทำงานได้

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  <security>
      <requestFiltering>
          <fileExtensions>
              <add fileExtension=".woff" allowed="true" />
              <add fileExtension=".ttf" allowed="true" />
              <add fileExtension=".woff2" allowed="true" />
          </fileExtensions>
      </requestFiltering>
  </security>    
</system.webServer>

เรียกใช้ IIS Server Manager (เรียกใช้คำสั่ง: inetmgr) เปิด Mime Types แล้วเพิ่มรายการต่อไปนี้

นามสกุลไฟล์: .woff

ประเภท MIME : application / octet-stream

ฉันลองใช้สิ่งต่าง ๆ เกี่ยวกับการอนุญาตประเภท mime เป็นต้น แต่สำหรับฉันแล้วมันก็ลงเอยด้วยว่า web.config ได้ลบตัวจัดการไฟล์แบบคงที่ใน IIS แล้วเพิ่มอย่างชัดเจนอีกครั้งสำหรับไดเรกทอรีที่จะมีไฟล์คงที่ ทันทีที่ฉันเพิ่มโหนดตำแหน่งสำหรับไดเรกทอรีของฉันและเพิ่มตัวจัดการกลับคำขอจะหยุดรับ 404 วินาที

หากคุณใช้ CodeIgniter ภายใต้ IIS7:

ในไฟล์ web.config ของคุณเพิ่มwoffให้กับรูปแบบ

<rule name="Rewrite CI Index">
  <match url=".*" />
    <conditions>
      <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
    </conditions>
    <action type="Rewrite" url="index.php/{R:0}" />
 </rule>

หวังว่ามันจะช่วย!

สิ่งนี้อาจเห็นได้ชัด แต่มันเพิ่มจำนวนขึ้นเป็น 404 ครั้งฉัน ... ตรวจสอบให้แน่ใจว่าการตั้งค่าการอนุญาตโฟลเดอร์ฟอนต์ถูกต้อง

ตรวจสอบตัวเขียน URL ของคุณด้วย มันอาจจะโยน 404 หากพบบางสิ่ง "แปลก"

หากคุณไม่มีสิทธิ์เข้าถึงการกำหนดค่าเว็บเซิร์ฟเวอร์คุณสามารถทำได้เพียงเปลี่ยนชื่อไฟล์ฟอนต์เพื่อให้มันจบลงด้วย svg (แต่ยังคงรูปแบบไว้) ทำงานได้ดีสำหรับฉันใน Chrome และ Firefox

หากยังไม่สามารถใช้งานได้หลังจากเพิ่มประเภท MIME โปรดตรวจสอบว่า "การพิสูจน์ตัวตนแบบไม่ระบุชื่อ" เปิดใช้งานในส่วนการตรวจสอบความถูกต้องในไซต์และตรวจสอบให้แน่ใจว่าได้เลือก

ชนิด IIS Mime: .woff font / x-woff (ไม่ใช่แอปพลิเคชัน / x-woff หรือแอปพลิเคชัน / x-font-woff)

แก้ไขมัน:

ฉันต้องใช้วิธี Mo'Bulletproofer