แบบอักษรของเว็บใช้เพื่ออนุญาตให้ใช้ฟอนต์ใน CSS ซึ่งไม่ได้ติดตั้งบนระบบโลคัล
รูปแบบแบบอักษรของเว็บที่แตกต่างกัน
| ซีเนียร์ |
แบบอักษรและคำอธิบาย |
| 1 |
TrueType Fonts (TTF)
TrueType เป็นแบบอักษรแบบร่างมาตรฐานที่พัฒนาโดย Apple และ Microsoft ในช่วงปลายทศวรรษ 1980 ซึ่งกลายเป็นแบบอักษรที่ใช้กันทั่วไปสำหรับทั้งระบบปฏิบัติการ Windows และ MAC |
| 2 |
OpenType Fonts (OTF)
OpenType เป็นรูปแบบสำหรับฟอนต์คอมพิวเตอร์ที่ปรับขนาดได้และพัฒนาโดย Microsoft |
| 3 |
The Web Open Font Format (WOFF)
WOFF ใช้สำหรับพัฒนาหน้าเว็บและพัฒนาในปี 2009 ตอนนี้ใช้โดยคำแนะนำ W3C |
| 4 |
SVG Fonts/Shapes
SVG อนุญาตแบบอักษร SVG ภายในเอกสาร SVG นอกจากนี้เรายังสามารถใช้ CSS กับ SVG ด้วยคุณสมบัติใบหน้าแบบอักษร |
| 5 |
Embedded OpenType Fonts (EOT)
EOT ใช้ในการพัฒนาหน้าเว็บและฝังอยู่ในหน้าเว็บดังนั้นจึงไม่จำเป็นต้องอนุญาตแบบอักษรของบุคคลที่สาม |
โค้ดต่อไปนี้แสดงโค้ดตัวอย่างของแบบอักษร -
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/https/isolution.pro/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>
มันจะให้ผลลัพธ์ดังต่อไปนี้ -
คำอธิบายแบบอักษร
รายการต่อไปนี้มีคำอธิบายแบบอักษรทั้งหมดซึ่งอยู่ในกฎ @ font-face -
| ซีเนียร์ |
มูลค่าและรายละเอียด |
| 1 |
font-family
ใช้เพื่อกำหนดชื่อของฟอนต์ |
| 2 |
src
ใช้เพื่อกำหนด URL |
| 3 |
font-stretch
ใช้ในการค้นหาว่าควรยืดแบบอักษรอย่างไร |
| 4 |
font-style
ใช้เพื่อกำหนดรูปแบบฟอนต์ |
| 5 |
font-weight
ใช้เพื่อกำหนดน้ำหนักตัวอักษร (ตัวหนา) |