กฎ CSS3 @ font-face
ตัวอย่าง
ระบุตัวอักษรชื่อ "myFirstFont" และระบุตำแหน่งที่จะหา URL:
{
font-family: myFirstFont;
src: URL ( 'Sansation_Light.ttf')
URL ( 'Sansation_Light.eot'); / * IE9 * /
}
ลอง»
สนับสนุนเบราว์เซอร์
Internet Explorer 9, Firefox, Opera, Chrome และ Safari @ สนับสนุนกฎ font-face
อย่างไรก็ตาม Internet Explorer 9 สนับสนุนเฉพาะ .eot ประเภทของแบบอักษร, Firefox, Chrome, Safari, Opera และการสนับสนุน .ttf และ .otf สองประเภทของแบบอักษร
หมายเหตุ: Internet Explorer 8 และรุ่นก่อนหน้า IE ไม่สนับสนุนกฎ @ font-face
แอตทริบิวต์คำจำกัดความและคำแนะนำ
@ กฎ font-face ออกแบบเว็บไม่ได้มีการใช้ "เว็บปลอดภัย" แบบอักษรอย่างใดอย่างหนึ่ง
ชื่อของตัวอักษรตัวอักษร - กฎใบหน้า:
- font-family: myFirstFont;
ไฟล์ตัวอักษรที่มีอยู่บนเซิร์ฟเวอร์ของคุณอยู่ที่ไหนสักแห่ง, CSS อ้างอิง:
- src: URL ( 'Sansation_Light.ttf')
หากไฟล์ตัวอักษรที่อยู่ในสถานที่ที่แตกต่างกันให้ใช้ URL แบบเต็ม:
- src: URL ( '../../ www.w3cschool.css / CSS3 / Sansation_Light.ttf')
คือตอนนี้พร้อมที่จะใช้ตัวอักษรต่อไปนี้เป็นตัวอย่างของวิธีการใช้งานทุกส่วน div นี้:
{
font-family: myFirstFont;
}
ไวยากรณ์:
- @ font-face
{
ตัวอักษรคุณสมบัติ
}
ตัวอย่างต่อไปนี้ของตัวอักษรที่ใช้ใน div A:
{
font-family: myFirstFont;
}
ไวยากรณ์
{
ตัวอักษรคุณสมบัติ
}
| คำอธิบายตัวอักษร | ความคุ้มค่า | คำอธิบาย |
|---|---|---|
| font-family | ชื่อ | จำเป็นต้องใช้ กำหนดชื่อตัวอักษร |
| src | URL | จำเป็นต้องใช้ กำหนด URL แบบอักษรดาวน์โหลด (S) |
| ตัวอักษรยืด | ปกติ ย่อ อัลตร้าข้น พิเศษข้น กึ่งข้น ขยาย กึ่งขยาย พิเศษขยาย อัลตร้าขยาย | ไม่จำเป็น กำหนดวิธีการที่ตัวอักษรที่ควรได้รับการยืด ค่าเริ่มต้นคือ "ปกติ" |
| ตัวอักษรสไตล์ | ปกติ ตัวเอียง เอียง | ไม่จำเป็น กำหนดรูปแบบตัวอักษรที่ควรเป็นเช่น ค่าเริ่มต้นคือ "ปกติ" |
| font-weight | ปกติ กล้า 100 200 300 400 500 600 700 800 900 | ไม่จำเป็น น้ำหนักอักษรที่กำหนดเอง ค่าเริ่มต้นคือ "ปกติ" |
| Unicode ช่วง | Unicode ช่วง | ไม่จำเป็น แบบอักษรช่วงที่มีการกำหนดสนับสนุนอักขระ Unicode ค่าเริ่มต้นคือ "U + 0-10 FFFF" |
บทความที่เกี่ยวข้อง
กวดวิชา CSS3: CSS3 อักษร