Firefox ไม่สามารถแสดงไอคอนจากการตั้งค่า Font Awesome webfont

ใน Firefox (Windows 7) ไอคอนและร่ายมนตร์ที่เรียกจากแพ็คเกจแบบอักษร Awesome Awesomeแสดงผลไม่ถูกต้อง ตัวอย่างของสิ่งนี้สามารถเห็นได้ในเว็บไซต์ Khan Academy ด้านล่างวิดีโอไอคอนจะแสดงเป็นกล่องพร้อมรหัสฐานสิบหก ซึ่งหมายความว่า Firefox จะไม่ได้รับการดาวน์โหลด

ลักษณะที่ปรากฏบน Chrome (Windows 7), Safari (Mac OS X) และ Stainless (Mac OS X):

ฉันพบคำถามนี้ใน Stack Overflowที่อาจอธิบายสาเหตุที่เกิดขึ้น - CSS ใช้เครื่องหมายคำพูดเดี่ยวเพื่อใส่ตำแหน่ง src ของแบบอักษร อย่างไรก็ตามฉันไม่มีสิทธิ์เข้าถึงการเขียนไปยังเซิร์ฟเวอร์ Khan Academy ดังนั้นฉันจึงไม่สามารถแก้ไขเว็บไซต์จริงได้ ฉันต้องการทราบว่าสามารถแก้ไขได้ใน Firefox หรือไม่และอย่างไร ฉันสามารถเรียกใช้สคริปต์ Greasemonkey หากจะช่วยได้ ฉันได้ลองดาวน์โหลดแบบอักษรด้วยตนเองแล้วเพิ่มลงในโฟลเดอร์แบบอักษรของ Windows แต่สิ่งนี้ไม่ได้ช่วย

สำหรับการอ้างอิง CSS ที่ตั้งค่าฟอนต์นี้ (Firefox ดำเนินการไม่ถูกต้อง) คือ:

@font-face
{
  font-family:'FontAwesome';
  src:url('./fontawesome-webfont.eot');
  src:url('./fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
      url('./fontawesome-webfont.woff') format('woff'),
      url('./fontawesome-webfont.ttf') format('truetype'),
      url('./fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight:normal;
  font-style:normal
}

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-decoration:inherit
}

อัปเดต:ฉันพบว่า Firefox แสดงไอคอนแบบอักษรที่ถูกต้องในเว็บไซต์ของแพคเกจ Font Awesome (ลิงก์ด้านบน) เมื่อตรวจสอบ CSS และเปรียบเทียบกับ CSS ของ Khan Academy ฉันพบว่ารหัสทั้งสองนั้นเหมือนกันยกเว้นว่าไม่มีเครื่องหมายอัฒภาคหลังจากแอตทริบิวต์สุดท้ายสำหรับ CSS ของ KA (ถ้าคุณไม่สนใจความจริงที่ว่ามันถูกบีบอัด) การขาดเครื่องหมายอัฒภาคทำให้เกิดปัญหานี้หรือไม่

ปัญหาที่อธิบายในคำถามได้รับการแก้ไขโดย Khan Academy โดยการเปลี่ยนเส้นทางทั้งหมดจาก./เป็น/fonts/(ตัวอย่างเช่น./fontawesome-webfont.ttfการเปลี่ยนแปลง/fonts/fontawesome-webfont.ttf) สำหรับฉันแล้วดูเหมือนว่า Firefox จะไม่สามารถอ่านไฟล์จากไดเรกทอรี "dot" พิเศษ (ซึ่งอ้างถึงไดเรกทอรีปัจจุบัน)

PS:การขาดเครื่องหมายอัฒภาคใน CSS หลังจากแอตทริบิวต์สุดท้ายไม่ทำให้เกิดปัญหานี้

ความคิดเห็นเพิ่มเติม:

การแก้ไข.คำนำหน้าของคุณเป็นปัญหาของเซิร์ฟเวอร์ไม่ใช่วิธีที่ Firefox จัดการกับไฟล์ KA กำลังอ้างอิงไฟล์ฟอนต์จากตำแหน่งที่ไม่ถูกต้อง - สุ่ม

! ที่ไม่ถูกต้อง แบบอักษรทำงานได้อย่างถูกต้องในเบราว์เซอร์อื่น ๆ สามตัวตามที่ฉันได้กล่าวไปแล้วในคำถามเมื่อนานมาแล้วซึ่งหมายความว่าแบบอักษรอยู่ในตำแหน่งที่ถูกต้อง เห็นได้ชัดว่าปัญหาของ Firefox กับ./เส้นทางตามที่ฉันอธิบายซึ่งบังคับให้ KA ย้ายไฟล์ฟอนต์ไปยังตำแหน่งใหม่ที่ไม่ต้องการ./ทำให้ Firefox สามารถอ่านไฟล์ฟอนต์ได้อย่างถูกต้อง ดังนั้นมันจึงเป็นปัญหาว่า Firefox จัดการกับไฟล์อย่างไร

อาจจะไม่คำตอบสำหรับคำถามที่ถูกวาง แต่พอที่เกี่ยวข้องกับการช่วยให้ผู้คนที่จบลงที่นี่กับปัญหาที่แตกต่างกันเล็กน้อยที่ก่อให้เกิดผลเช่นเดียวกับที่ปรากฏในหน้าจอ

Firefox ปิดกั้นการใช้แบบอักษรที่อยู่ในโดเมนอื่น (ย่อย -)

ยังอ่านความคิดเห็นในโพสต์นั้นพวกเขาให้คำแนะนำที่ดี

ฉันเปลี่ยนเส้นทางเพื่อเรียกใช้ IE, Firefox และ Chrome อย่างถูกต้องดังต่อไปนี้: ( URL เพื่อดู )

@font-face{
  font-family:'FontAwesome';
  src:url('ogi/bete/font/fontawesome-webfont.eot?v=3.0.1');
  src:url('/ogi/bete/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
  url('/ogi/bete/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('ogi/bete/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }