CSS @font-face Rule
ตัวอย่าง
ระบุแบบอักษรชื่อ "myFirstFont" และระบุ URL ที่จะพบ:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
ตาม@font-face
กฎแล้ว นักออกแบบเว็บไซต์ไม่จำเป็นต้องใช้แบบอักษร "ปลอดภัยสำหรับเว็บ" อีกต่อไป
ใน@font-face
กฎ คุณต้องกำหนดชื่อฟอนต์ (เช่น myFirstFont) ก่อน แล้วจึงชี้ไปที่ไฟล์ฟอนต์
ในการใช้แบบอักษรสำหรับองค์ประกอบ HTML ให้อ้างอิงถึงชื่อของแบบอักษร (myFirstFont) ผ่านคุณสมบัติ font-family:
div
{
font-family: myFirstFont;
}
รองรับเบราว์เซอร์
กฎ@font-face
นี้รองรับใน Edge, Chrome, Firefox, Safari และ Opera
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับรูปแบบฟอนต์อย่างเต็มที่
Font format | |||||
---|---|---|---|---|---|
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 | Not supported | Not supported | Not supported | 3.2 | Not supported |
EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*รูปแบบฟอนต์ใช้งานได้เมื่อตั้งค่าเป็น "ติดตั้งได้" เท่านั้น
ไวยากรณ์
@font-face
{
font-properties
}
Font descriptor | Values | Description |
---|---|---|
font-family | name | Required. Defines the name of the font. |
src | URL | Required. Defines the URL(s) where the font should be downloaded from |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default value is "normal" |
font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default value is "normal" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "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 ได้หลายแบบสำหรับฟอนต์เดียวกัน
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Web Fonts