CSS3 แบบอักษรเว็บ - เดอะ @font-face กฎ
อักษรเว็บช่วยให้นักออกแบบเว็บเพื่อใช้แบบอักษรที่ไม่ได้ติดตั้งบนคอมพิวเตอร์ของผู้ใช้
เมื่อคุณได้พบ / ซื้อแบบอักษรที่คุณต้องการที่จะใช้เพียงแค่รวมไฟล์ตัวอักษรบนเว็บเซิร์ฟเวอร์ของคุณและมันจะถูกดาวน์โหลดไปยังผู้ใช้โดยอัตโนมัติเมื่อมีความจำเป็น
คุณอักษร "ตัวเอง" ได้กำหนดไว้ใน CSS3 นี้ @font-face กฎ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
รูปแบบอักษรอื่น
TrueType แบบอักษร (TTF)
TrueType เป็นมาตรฐานแบบอักษรที่พัฒนาขึ้นในช่วงปลายปี 1980 โดยแอปเปิ้ลและไมโครซอฟท์. TrueType เป็นรูปแบบตัวอักษรที่พบมากที่สุดสำหรับทั้ง Mac OS และระบบปฏิบัติการ Microsoft Windows
OpenType อักษร (OTF)
OpenType เป็นรูปแบบแบบอักษรคอมพิวเตอร์ที่ปรับขนาดได้ มันถูกสร้างขึ้นใน TrueType และเป็นเครื่องหมายการค้าจดทะเบียนของไมโครซอฟท์. OpenType แบบอักษรที่ใช้ทั่วไปในวันนี้บนแพลตฟอร์มคอมพิวเตอร์รายใหญ่
รูปแบบเปิดเว็บ Font (WOFF)
WOFF เป็นรูปแบบตัวอักษรสำหรับการใช้งานในหน้าเว็บ ได้รับการพัฒนาในปี 2009 และตอนนี้ก็เป็นคำแนะนำ W3C WOFF เป็นหลัก OpenType หรือ TrueType มีการบีบอัดและข้อมูลเพิ่มเติม มีเป้าหมายที่จะสนับสนุนการกระจายตัวอักษรจากเซิร์ฟเวอร์ไปยังลูกค้าผ่านเครือข่ายที่มีข้อ จำกัด แบนด์วิดธ์
รูปแบบเปิดเว็บ Font (WOFF 2.0)
TrueType/OpenType Font ที่มีการบีบอัดที่ดีกว่า WOFF 1.0
SVG อักษร / รูปร่าง
แบบอักษร SVG SVG อนุญาตให้นำไปใช้เป็นร่ายมนตร์เมื่อแสดงข้อความ SVG 1.1 กำหนดโมดูลตัวอักษรที่ช่วยให้การสร้างแบบอักษรภายในเอกสาร SVG นอกจากนี้คุณยังสามารถใช้ CSS เอกสาร SVG และ @font-face กฎสามารถนำไปใช้กับข้อความในเอกสาร SVG
ฝังตัว OpenType อักษร (EOT)
แบบอักษร EOT เป็นรูปแบบกะทัดรัดของ OpenType แบบอักษรที่ออกแบบโดยไมโครซอฟท์เพื่อใช้เป็นที่ฝังตัวอักษรบนหน้าเว็บ
สนับสนุนเบราว์เซอร์สำหรับรูปแบบตัวอักษร
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ในรูปแบบตัวอักษร
| รูปแบบตัวอักษร | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0 * | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.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: รูปแบบอักษรที่ทำงานเฉพาะเมื่อตั้งค่าให้เป็น "ติดตั้ง"
* Firefox: ไม่ได้รับการสนับสนุนโดยค่าเริ่มต้น แต่สามารถเปิดใช้งาน (ต้องตั้งธง "true" เพื่อใช้ WOFF2)
การใช้อักษรที่คุณต้องการ
ใน CSS3 นี้ @font-face กฎคุณต้องกำหนดชื่อให้กับตัวอักษร (เช่น myFirstFont ) แล้วชี้ไปที่แฟ้มแบบอักษร
 | เคล็ดลับ: ควรใช้อักษรตัวพิมพ์เล็กสำหรับ URL แบบอักษร ตัวอักษรตัวพิมพ์ใหญ่สามารถให้ผลที่ไม่คาดคิดใน IE |
|---|
หากต้องการใช้ตัวอักษรสำหรับองค์ประกอบ HTML อ้างถึงชื่อของตัวอักษร (คน myFirstFont ) ผ่าน font-family ทรัพย์สิน:
ตัวอย่าง
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
ลองตัวเอง» โดยใช้ข้อความเป็นตัวหนา
คุณต้องเพิ่มอีก @font-face กฎที่มีอธิบายสำหรับข้อความตัวหนา:
ตัวอย่าง
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
ลองตัวเอง» แฟ้ม "sansation_bold.woff" เป็นแฟ้มแบบอักษรอื่นที่มีตัวอักษรตัวหนาสำหรับเครื่องปรับอากาศ Sansation อักษร
เบราว์เซอร์จะใช้ข้อมูลนี้เมื่อใดก็ตามที่ชิ้นส่วนของข้อความที่มี font-family " myFirstFont " ควรทำให้เป็นตัวหนา
วิธีนี้คุณสามารถมีหลาย @font-face กฎสำหรับตัวอักษรเดียวกัน
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 »
CSS3 อธิบายตัวอักษร
ตารางต่อไปนี้แสดงอธิบายแบบอักษรที่สามารถกำหนดภายใน @font-face กฎ:
| ข้อบ่งชี้ | ค่า | ลักษณะ |
|---|---|---|
| font-family | name | จำเป็นต้องใช้ กำหนดชื่อให้กับตัวอักษร |
| src | URL | จำเป็นต้องใช้ กำหนด URL ของไฟล์ตัวอักษร |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | ไม่จำเป็น กำหนดวิธีการแบบอักษรที่ควรได้รับการยืด เริ่มต้นเป็น "ปกติ" |
| font-style | normal italic oblique | ไม่จำเป็น กำหนดวิธีการแบบอักษรที่ควรได้รับการเรียกขาน เริ่มต้นเป็น "ปกติ" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | ไม่จำเป็น กำหนดความกล้าหาญของตัวอักษร เริ่มต้นเป็น "ปกติ" |
| unicode-range | unicode-range | ไม่จำเป็น กำหนดช่วงของอักขระ Unicode สนับสนุนแบบอักษร เริ่มต้นคือ "U + 0-10FFFF" |