CSS @font-face rule

  • หน้าก่อน
  • หน้าต่อไป

การกำหนดและการใช้งาน

ด้วยการใช้ rule @font-face ผู้ออกแบบเว็บไม่จำเป็นต้องใช้แบบอักษร "ความปลอดภัย" อีกต่อไป

ใน rule @font-face คุณจะต้องระบุชื่อแบบอักษรก่อน (ตัวอย่าง myFirstFont) แล้วจึงหนี้ไปยังไฟล์แบบอักษร

คำเตือน:URL ของแบบอักษรใช้ตัวอักษรเล็กต่ำ ตัวอักษรใหญ่อาจก่อให้เกิดผลที่ไม่คาดคิดใน IE!

ถ้าต้องการใช้แบบอักษรใน HTML element โปรดอ้างชื่อแบบอักษรผ่าน attribute font-family (myFirstFont):

div {
  font-family: myFirstFont;
}

ดูเพิ่มเติมที่:

CSS Tutorial:CSS Web ตัวอักษร

ตัวอย่าง

ระบุแบบอักษรที่มีชื่อ "myFirstFont" และกำหนด URL ที่สามารถหาแบบอักษรได้

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

ลองทดลองด้วยตัวเอง

คุณสามารถหาตัวอย่าง TIY มากมายที่ด้านล่างของหน้าเว็บ

CSS syntax

@font-face {
  font-properties
}
font-descriptor ค่า รายละเอียด
font-family name ควรมีต้องการระบุชื่อแบบอักษร
src URL ควรมีต้องการระบุ URL ที่ดาวน์โหลดแบบอักษร
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 可选。定义应如何拉伸字体。默认值是 "normal"。
font-style
  • normal
  • italic
  • oblique
 可选。定义字体样式。默认值是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 可选。定义字体的粗细。默认值是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 Unicode 字符范围。默认值是 "U+0-10FFFF"。

ตัวอย่างเพิ่มเติม

ตัวอย่าง

คุณจะต้องเพิ่มกฎ @font-face อีกกฎหนึ่งที่มีการบรรยายของข้อความหนา:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

ลองทดลองด้วยตัวเอง

ไฟล์ "sansation_bold.woff" คือไฟล์ตัวอักษรอีกแฟ้มหนึ่งที่มีตัวอักษรหนาของตัวอักษร Sansation

เมื่อตั้งต้นตัวอักษรด้วยตรง "myFirstFont" และต้องการแสดงเป็นหนา ตัวอักษรนี้จะถูกใช้โดยเบราเซอร์

ดังนั้น คุณสามารถตั้งกฎ @font-face หลายกฎสำหรับตัวอักษรเดียวกันได้

การสนับสนุนของเบราเซอร์

Internet Explorer, Firefox, Opera, Chrome และ Safari สนับสนุนกฎ @font-face

ตัวเลขในตารางบ่งชี้ครั้งแรกที่เบราเซอร์สนับสนุนรูปแบบตัวอักษรทั้งหมด

รูปแบบตัวอักษร
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG ไม่สนับสนุน ไม่สนับสนุน ไม่สนับสนุน 3.2 ไม่สนับสนุน
EOT 6.0 ไม่สนับสนุน ไม่สนับสนุน ไม่สนับสนุน ไม่สนับสนุน

* Edge และ IE: รูปแบบตัวอักษรสามารถใช้งานได้เมื่อถูกตั้งเป็น "installable"

* Firefox: โดยเริ่มต้นมีการปิดกั้น แต่สามารถเปิดใช้งานได้ (ต้องตั้ง flag ให้เป็น "true" ที่จะสามารถใช้ WOFF2 ได้)

  • หน้าก่อน
  • หน้าต่อไป