CSS · variable font axes · font-variation-settings
หนึ่งฟอนต์ ล้านหน้าตา
Variable font คือไฟล์ฟอนต์เดียว แต่เลื่อน slider ได้ตามแกน (axes) ที่ designer ออกแบบไว้ —
น้ำหนัก ขนาดออปติคัล ความโค้ง ฯลฯ ทั้งหมดคือ font-variation-settings ใน CSS บรรทัดเดียว
ฟอนต์ที่ใช้: Fraunces — display serif สัญชาติ variable มี 4 axes จริง:
wght น้ำหนัก, opsz ขนาดออปติคัล, SOFT ความนุ่ม/โค้ง, WONK แบบหยักของ character.
ลองเลื่อน SOFT กับ WONK แล้วสังเกตว่าตัวอักษรเปลี่ยนไปยังไง
Fraunces
— แก้ข้อความได้โดยตรง
Typography ที่มีชีวิต
/* CSS ปัจจุบัน */ font-family: "Fraunces", Georgia, serif; font-size: 48px; font-style: normal; font-variation-settings: "wght" 400, "opsz" 48, "SOFT" 0, "WONK" 0;
Axes ของ Fraunces
| Axis tag | ชื่อ | ช่วง | ความหมาย |
|---|---|---|---|
wght |
Weight | 100 – 900 | น้ำหนักเส้น (thin → black) |
opsz |
Optical size | 9 – 144 | ขนาดออปติคัล — ขนาดเล็กเส้นหนาขึ้น, serif ต่างกัน |
SOFT |
Softness | 0 – 100 | ความนุ่ม/โค้งของ serif และเส้น — 0 = คมชัด, 100 = มน |
WONK |
Wonky | 0 – 1 | สลับ alternate glyph ที่มีรูปทรงหยักซับซ้อน |
ital |
Italic | 0 / 1 | italic จริง (ไม่ใช่แค่เอียงเส้น) — ตัวอักษรบางตัวเปลี่ยนรูปทรง |
100 = Thin · 400 = Regular · 700 = Bold · 900 = Black
ค่าน้อย = ออปติคัลขนาดเล็ก (เส้นหนาขึ้น) · ค่ามาก = ขนาดใหญ่
0 = คมชัด · 100 = มน/โค้งนุ่ม
0 = ปกติ · 1 = alternate glyph หยักซับซ้อน
Italic
font-style: italic
tip: WONK เห็นผลชัดที่สุดเมื่อ
wght ต่ำ (100–300)
และใช้ตัวพิมพ์ใหญ่หรือตัว a, g, y — ลองพิมพ์ "Ag" แล้วเลื่อน WONK ดู