วิธีเขียน @font-face ให้ใช้ได้ทุก Web Browser

เนื่องจากโค้ดของการเขียน @font-face rule ให้ใช้ได้ในทุกๆ web browser นั้นค่อนข้างยาว หากเราใช้ Sass ให้เราสร้างเป็น Mixin เอาไว้ใช้เลยก็ได้

จาก Mixin ข้างต้น เราจะต้องใส่ variable ดังนี้

  • $fontNameชื่อที่เราจะใช้เรียก font นั้นๆ
  • $fileNameชื่อไฟล์ของ font (ต้องตั้งชื่อไฟล์ทุกๆ นามสกุลให้ตรงกัน)
  • $pathที่อยู่ของไฟล์ font
  • $weightweight ของ font นั้นๆ (ค่าเริ่มต้นเป็น normal)
  • $stylestyle ของ font นั้นๆ (ค่าเริ่มต้นเป็น normal)

สมมติว่าเราจะใช้ FontAwesome ก็ให้เราดาวน์โหลดมาเก็บไว้ที่โฟลเดอร์ fonts/FontAwesome แล้วใช้ Mixin ตัวนี้ได้เลย แบบนี้

แต่ถ้าใครไม่ได้ใช้ CSS Preprocessor เลย เราก็สามารถเขียนแบบ css ไปก็ได้ ซึ่งโค้ดก็จะเหมือนกันกับโค้ดที่ได้จากการ compile Mixin นี้นั่นเอง

(Visited 1,676 times, 1 visits today)

One Response to “วิธีเขียน @font-face ให้ใช้ได้ทุก Web Browser”

  1. เดี๋ยวนี้ไม่ต้องใส่ src: local('☺'), หลังจากนามสกุล .eot แล้วเหรอครับ?

Leave a Reply