CSS Web Fonts
กฎ CSS @font-face
แบบอักษรของเว็บช่วยให้นักออกแบบเว็บไซต์ใช้แบบอักษรที่ไม่ได้ติดตั้งไว้ในคอมพิวเตอร์ของผู้ใช้ได้
เมื่อคุณพบ/ซื้อแบบอักษรที่คุณต้องการใช้ เพียงแค่รวมไฟล์แบบอักษรไว้บนเว็บเซิร์ฟเวอร์ของคุณ แล้วไฟล์นั้นจะถูกดาวน์โหลดไปยังผู้ใช้โดยอัตโนมัติเมื่อจำเป็น
แบบอักษร "ของคุณเอง" ถูกกำหนดไว้ใน@font-faceกฎ CSS
รูปแบบตัวอักษรต่างๆ
แบบอักษร TrueType (TTF)
TrueType เป็นมาตรฐานแบบอักษรที่พัฒนาขึ้นในปลายทศวรรษ 1980 โดย Apple และ Microsoft TrueType เป็นรูปแบบฟอนต์ทั่วไปส่วนใหญ่สำหรับทั้งระบบปฏิบัติการ Mac OS และ Microsoft Windows
แบบอักษร OpenType (OTF)
OpenType คือรูปแบบสำหรับฟอนต์คอมพิวเตอร์ที่ปรับขนาดได้ สร้างขึ้นบน TrueType และเป็นเครื่องหมายการค้าจดทะเบียนของ Microsoft ฟอนต์ OpenType ถูกใช้กันทั่วไปในแพลตฟอร์มคอมพิวเตอร์หลักๆ ในปัจจุบัน
รูปแบบแบบอักษรเว็บเปิด (WOFF)
WOFF เป็นรูปแบบฟอนต์สำหรับใช้ในหน้าเว็บ ได้รับการพัฒนาในปี 2552 และปัจจุบันเป็นคำแนะนำของ W3C WOFF นั้นเป็น OpenType หรือ TrueType ที่มีการบีบอัดและข้อมูลเมตาเพิ่มเติม เป้าหมายคือการสนับสนุนการกระจายแบบอักษรจากเซิร์ฟเวอร์ไปยังไคลเอนต์ผ่านเครือข่ายที่มีข้อจำกัดแบนด์วิดท์
รูปแบบแบบอักษรเว็บเปิด (WOFF 2.0)
แบบอักษร TrueType/OpenType ที่ให้การบีบอัดได้ดีกว่า WOFF 1.0
แบบอักษร/รูปร่าง SVG
แบบอักษร SVG อนุญาตให้ใช้ SVG เป็นสัญลักษณ์เมื่อแสดงข้อความ ข้อกำหนด SVG 1.1 กำหนดโมดูลแบบอักษรที่อนุญาตให้สร้างแบบอักษรภายในเอกสาร SVG คุณยังสามารถใช้ CSS กับเอกสาร SVG และกฎ @font-face สามารถใช้กับข้อความในเอกสาร SVG ได้
แบบอักษร OpenType แบบฝัง (EOT)
แบบอักษร EOT เป็นแบบอักษร OpenType แบบกะทัดรัดที่ออกแบบโดย Microsoft สำหรับใช้เป็นแบบอักษรฝังตัวบนหน้าเว็บ
การสนับสนุนเบราว์เซอร์สำหรับรูปแบบตัวอักษร
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับรูปแบบฟอนต์อย่างเต็มที่
| 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 |
*IE: รูปแบบฟอนต์ใช้งานได้เมื่อตั้งค่าเป็น "ติดตั้งได้" เท่านั้น
การใช้แบบอักษรที่คุณต้องการ
ใน@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
เบราว์เซอร์จะใช้สิ่งนี้เมื่อใดก็ตามที่ข้อความที่มีกลุ่มแบบอักษร "myFirstFont" ควรแสดงเป็นตัวหนา
วิธีนี้ทำให้คุณสามารถมี@font-faceกฎเกณฑ์มากมายสำหรับฟอนต์เดียวกัน
CSS Font Descriptors
ตารางต่อไปนี้แสดงรายการตัวอธิบายแบบอักษรทั้งหมดที่สามารถกำหนดได้ภายใน@font-faceกฎ:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| 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 is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |