คำแนะนำหลักสูตร:

กฎ @font-face ของ CSS

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

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

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

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

ถ้าต้องการใช้ตัวอักษรใน HTML องค์ประกอบ ให้อ้างอิงชื่อตัวอักษรผ่านคุณสมบัติ font-family (myFirstFont):
  font-family: myFirstFont;
}

div {

ดูเพิ่มเติมที่:ตัวอักษร Web ของ CSS

ตัวอย่าง

CSS คู่มือ:

@font-face {
  font-family: myFirstFont;
  กำหนดตัวอักษรชื่อ "myFirstFont" และกำหนด URL ที่สามารถหาตัวอักษรได้
}

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

src: url(sansation_light.woff);

สามารถหาตัวอย่าง TIY มากมายที่ด้านล่างของหน้า

@font-face {
  CSS ภาษา
}
font-properties ค่า คำอธิบาย
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 เท่านั้น)