บทช่วยสอน CSS3 ตัวอักษร ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ กฎ CSS3 @ font-face,สนับสนุนเบราว์เซอร์,คุณจำเป็นต้องใช้ตัวอักษร,ตัวอย่าง,ใช้ข้อความที่เป็นตัวหนา,ตัวอย่าง,คำอธิบายตัวอักษร CSS3,
รุ่นก่อนหน้าของ CSS3, นักออกแบบเว็บที่มีการใช้งานบนเครื่องคอมพิวเตอร์ของผู้ใช้เป็นแบบอักษรที่ติดตั้งไว้แล้ว
ใช้ CSS3, นักออกแบบเว็บสามารถใช้สิ่งที่ตัวอักษรเขา / เธอชอบ
เมื่อคุณพบไฟล์ที่คุณต้องการที่จะใช้แบบอักษรแฟ้มแบบอักษรก็จะถูกรวมอยู่ในเว็บไซต์ก็จะถูกดาวน์โหลดโดยอัตโนมัติเพื่อต้องการของผู้ใช้
ตัวอักษรที่คุณเลือกในรุ่นใหม่ใน CSS3 @ คำอธิบายกฎ font-face
คุณอักษร "ตัวเอง" ถูกกำหนดไว้ในกฎ CSS3 @ font-face
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
属性 | |||||
---|---|---|---|---|---|
@font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
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:
คุณต้องเพิ่มกฎ @ font-face อื่นที่มีข้อความเป็นตัวหนา:
ไฟล์ "Sansation_Bold.ttf" เป็นไฟล์แบบอักษรอื่นที่มีตัวอักษรตัวหนาเครื่องปรับอากาศ Sansation
โดยใช้ข้อความเบราว์เซอร์นี้เวลาของครอบครัวตัวอักษร "myFirstFont" ควรจะแสดงผลเป็นตัวหนา
ดังนั้นคุณสามารถมีจำนวนมากของตัวอักษร @ กฎ font-face เดียวกัน
ตารางต่อไปนี้แสดงคำอธิบายทั้งหมดอักษรและภายในของการกำหนดกฎ @ font-face นี้:
อธิบาย | ความคุ้มค่า | ลักษณะ |
---|---|---|
font-family | ชื่อ | จำเป็นต้องใช้ บทบัญญัติของชื่อตัวอักษร |
src | URL | จำเป็นต้องใช้ แฟ้มแบบอักษร URL ที่กำหนดไว้ |
ตัวอักษรยืด |
| ไม่จำเป็น กำหนดวิธีการวาดตัวอักษร เริ่มต้นเป็น "ปกติ" |
ตัวอักษรสไตล์ |
| ไม่จำเป็น ได้กำหนดรูปแบบตัวอักษร เริ่มต้นเป็น "ปกติ" |
font-weight |
| ไม่จำเป็น น้ำหนักอักษรที่กำหนดเอง เริ่มต้นเป็น "ปกติ" |
Unicode ช่วง | Unicode ช่วง | ไม่จำเป็น ที่กำหนดเองการสนับสนุนแบบอักษร Unicode อักขระช่วง เริ่มต้นคือ "U + 0-10FFFF" |