วันจันทร์ที่ 25 มีนาคม พ.ศ. 2556

[CSS] ปัญหา @font-face ไม่ทำงาน!!

ปัจจุบันหลายๆเว็บใช้วิธี import @font-face นำฟ้อนท์แปลกๆ สวยๆมาใช้ในเว็บ
และนั่นคือเรื่องที่่จะมาเขียนในวันนี้ครับ

ผมจะไม่พูดถึงการใช้งาน @font-face  แต่จะมาพูดวิธีแก้ไขปัญหาเมื่อ @font-face ไม่ทำงาน !!!

ปกติเวลาใช้งาน @font-face เราก็จะได้ฟ้อนท์สวยๆ งามๆมาใช้งาน แต่บางครั้งเกิดปัญหาคือ ฟ้อนท์สวยๆงามๆนั้นมันไม่ทำงาน ในie8+ หรือใน chrome ใช้งานได้ปกติ แต่ปรากฏว่าใน firefox เจ้าหมาไฟ มันไม่ทำงานซะอย่างนั้น

วันนี้มีวิธีแก้ครับ
เปิดไฟล์ .htaccess แล้วเพิ่มคำสั่งนี้ลงไป

 <FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

แค่นี้ @font-face ก็จะใช้งานได้อย่างดีเช่นเดิมแว้ว