ตัวอย่าง
ระบุตัวอักษรที่มีชื่อว่า "myFirstFont" และระบุ URL ที่จะสามารถพบได้:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
} ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
ด้วย @ กฎ font-face นักออกแบบเว็บจะไม่ต้องใช้หนึ่งใน "web-safe" แบบอักษร
ในกฎ @ font-face ใหม่ที่คุณจะต้องกำหนดชื่อให้กับตัวอักษร (eg myFirstFont) และจากนั้นชี้ไปที่แฟ้มแบบอักษร
เคล็ดลับ: ใช้อักษรตัวพิมพ์เล็กสำหรับ URL แบบอักษร ตัวอักษรตัวพิมพ์ใหญ่สามารถให้ผลที่ไม่คาดคิดใน IE!
หากต้องการใช้ตัวอักษรสำหรับองค์ประกอบ HTML อ้างถึงชื่อของตัวอักษร (myFirstFont) ผ่านคุณสมบัติ font-family นี้:
div
{
font-family: myFirstFont;
}สนับสนุนเบราว์เซอร์
กฎ font-face @ ได้รับการสนับสนุนใน Internet Explorer, Firefox, Opera, Chrome และ Safari
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ในรูปแบบตัวอักษร
| รูปแบบตัวอักษร | |||||
|---|---|---|---|---|---|
| TTF / OTF | 4.0 | 9.0 * | 3.5 | 3.1 | 10.0 |
| WOFF | 5.0 | 9.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 36.0 | ได้รับการสนับสนุน | 35.0 * | ได้รับการสนับสนุน | 26.0 |
| SVG | 4.0 | ได้รับการสนับสนุน | ได้รับการสนับสนุน | 3.2 | 9.0 |
| EOT | ได้รับการสนับสนุน | 6.0 | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ได้รับการสนับสนุน |
* ขอบและ IE: รูปแบบอักษรที่ทำงานเฉพาะเมื่อตั้งค่าให้เป็น "installable"
* Firefox: ยกเลิกโดยปริยาย แต่สามารถเปิดใช้งาน (ต้องตั้งธงที่จะ "true" ที่จะใช้ WOFF2)
วากยสัมพันธ์
@font-face
{
font-properties
}| บ่ง Font | ค่า | ลักษณะ |
|---|---|---|
| font-family | name | จำเป็นต้องใช้ กำหนดชื่อของตัวอักษร |
| src | URL | จำเป็นต้องใช้ กำหนด URL(s) ที่ตัวอักษรที่ควรได้รับการดาวน์โหลดได้จาก |
| ตัวอักษรยืด | ปกติ ย่อ อัลตร้าข้น พิเศษข้น กึ่งข้น ขยาย กึ่งขยาย พิเศษขยาย อัลตร้าขยาย | ไม่จำเป็น. กำหนดวิธีการแบบอักษรที่ควรได้รับการยืด ค่าเริ่มต้นเป็น "normal" |
| รูปแบบตัวอักษร | ปกติ ตัวเอียง เอียง | ไม่จำเป็น. กำหนดวิธีการแบบอักษรที่ควรได้รับการเรียกขาน ค่าเริ่มต้นเป็น "normal" |
| font-weight | ปกติ กล้า 100 200 300 400 500 600 700 800 900 | ไม่จำเป็น. กำหนดความกล้าหาญของตัวอักษร ค่าเริ่มต้นเป็น "normal" |
| Unicode ช่วง | 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 อักษร
เบราว์เซอร์จะใช้ข้อมูลนี้เมื่อใดก็ตามที่ชิ้นส่วนของข้อความที่มี font-family "myFirstFont" ควรทำให้เป็นตัวหนา
วิธีนี้คุณสามารถมีกฎ @ font-face มากสำหรับตัวอักษรเดียวกัน
หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS3: CSS3 อักษร