แบบอักษรของเว็บอนุญาตให้นักออกแบบเว็บไซต์ใช้แบบอักษรที่ไม่ได้ติดตั้งบนคอมพิวเตอร์ของผู้ใช้
เมื่อคุณพบ/ซื้อแบบอักษรที่ต้องการใช้แล้ว ให้ใส่แบบอักษรนั้นด้วย บนเว็บเซิร์ฟเวอร์ของคุณ และจะถูกดาวน์โหลดไปยังผู้ใช้โดยอัตโนมัติเมื่อจำเป็น
แบบอักษร "ของตัวเอง" ของคุณถูกกำหนดไว้ภายในกฎ CSS @font-face
แบบอักษร TrueType (TTF)
TrueType เป็นมาตรฐานแบบอักษรที่พัฒนาขึ้นในช่วงปลายทศวรรษ 1980 โดย Apple และ Microsoft TrueType เป็นรูปแบบฟอนต์ที่ใช้กันมากที่สุดสำหรับทั้ง Mac OS และ Microsoft ระบบปฏิบัติการวินโดวส์
แบบอักษร OpenType (OTF)
OpenType เป็นรูปแบบสำหรับแบบอักษรคอมพิวเตอร์ที่ปรับขนาดได้ มันถูกสร้างขึ้นบน TrueType และเป็นเครื่องหมายการค้าจดทะเบียนของ ไมโครซอฟต์ แบบอักษร OpenType ถูกใช้กันทั่วไปในปัจจุบันในสาขาวิชาหลัก แพลตฟอร์มคอมพิวเตอร์
รูปแบบแบบอักษรเปิดเว็บ (WOFF)
WOFF เป็นรูปแบบฟอนต์สำหรับใช้ในหน้าเว็บ ได้รับการพัฒนาในปี 2009 และเป็น ตอนนี้เป็นคำแนะนำของ 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;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The @font-face Rule</h1>
<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>
</body>
</html>
คุณต้องเพิ่มกฎ @font-face อื่นที่มีคำอธิบายสำหรับข้อความตัวหนา:
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The @font-face Rule</h1>
<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>
</body>
</html>
ไฟล์ "sansation_bold.woff" เป็นไฟล์ฟอนต์อื่นที่มีอักขระตัวหนาสำหรับฟอนต์ Sansation
เบราว์เซอร์จะใช้สิ่งนี้เมื่อใดก็ตามที่ข้อความที่มีตระกูลแบบอักษร "myFirstFont" ควรแสดงผลเป็นตัวหนา
วิธีนี้ทำให้คุณสามารถมีกฎ @font-face มากมายสำหรับแบบอักษรเดียวกัน
ตารางต่อไปนี้แสดงรายการตัวอธิบายแบบอักษรทั้งหมดที่สามารถกำหนดภายในกฎ @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"