CSS3 ตัวอักษร

กฎ CSS3 @ font-face

รุ่นก่อนหน้าของ CSS3, นักออกแบบเว็บที่มีการใช้งานบนเครื่องคอมพิวเตอร์ของผู้ใช้เป็นแบบอักษรที่ติดตั้งไว้แล้ว

ใช้ CSS3, นักออกแบบเว็บสามารถใช้สิ่งที่ตัวอักษรเขา / เธอชอบ

เมื่อคุณพบไฟล์ที่คุณต้องการที่จะใช้แบบอักษรแฟ้มแบบอักษรก็จะถูกรวมอยู่ในเว็บไซต์ก็จะถูกดาวน์โหลดโดยอัตโนมัติเพื่อต้องการของผู้ใช้

ตัวอักษรที่คุณเลือกในรุ่นใหม่ใน CSS3 @ คำอธิบายกฎ font-face

คุณอักษร "ตัวเอง" ถูกกำหนดไว้ในกฎ CSS3 @ font-face

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน

Internet Explorer 9 +, Firefox, Chrome, Safari, Opera และการสนับสนุน WOFF (เปิดเว็บรูปแบบตัวอักษร) แบบอักษร

Firefox, Chrome, Safari, Opera และการสนับสนุน .ttf (อักษรประเภททรู) และ .otf (OpenType) ประเภทตัวอักษร)

Chrome, Safari และ Opera นอกจากนี้ยังสนับสนุนแบบอักษร SVG / ทรุดตัวลง

Internet Explorer นอกจากนี้ยังสนับสนุน EOT (Embedded OpenType) แบบอักษร

หมายเหตุ: Internet Explorer 8 และรุ่นก่อนหน้านี้ไม่สนับสนุนกฎ @ font-face ใหม่

คุณจำเป็นต้องใช้ตัวอักษร

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

	เคล็ดลับ: URL ที่ใช้ตัวอักษรตัวพิมพ์เล็กตัวพิมพ์ใหญ่ใน IE จะให้ผลลัพธ์ที่ไม่คาดคิด

หากต้องการใช้ตัวอักษรสำหรับองค์ประกอบ HTML, การอ้างถึงชื่อตัวอักษร (myFirstFont) โดยคุณสมบัติ font-family:

ตัวอย่าง

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

div
{
font-family:myFirstFont;
}
</style>

ลอง»

ใช้ข้อความที่เป็นตัวหนา

คุณต้องเพิ่มกฎ @ font-face อื่นที่มีข้อความเป็นตัวหนา:

ตัวอย่าง

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

ลอง»

ไฟล์ "Sansation_Bold.ttf" เป็นไฟล์แบบอักษรอื่นที่มีตัวอักษรตัวหนาเครื่องปรับอากาศ Sansation

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

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

คำอธิบายตัวอักษร CSS3

ตารางต่อไปนี้แสดงคำอธิบายทั้งหมดอักษรและภายในของการกำหนดกฎ @ font-face นี้: