home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีใช้ CSS font-variant Property (สำหรับ Small Caps)

เรียนรู้การใช้ CSS font-variant property สำหรับ small caps letters — และว่าควรใช้ small caps ไหม

CSS font-variant property ระบุว่าข้อความแสดงเป็น normal text case หรือ small-caps font มี 3 ค่า:

  • normal (default text case)
  • inherit
  • small-caps

การใช้งานพื้นฐาน:

.small-caps { font-variant: small-caps; }

ก่อนใช้ font-variant ต้องเข้าใจ what, when, how ให้ถูกต้อง (หลายคนเข้าใจผิด)

เริ่มจากความแตกต่าง normal text vs small caps:

  • Normal text case (Sentence case) = ข้อความปกติ ตัวแรกของประโยคใหญ่
  • Small caps = ตัวพิมพ์ใหญ่สั้น ออกแบบมา blend กับ lowercase (x-height ใกล้เคียง)

เสียดายที่ web fonts หลายตัวไม่มี real small caps

ถ้าตั้ง font-variant: small-caps; จะได้ 2 แบบ:

  • Small caps สวย ออกแบบดี blend กับ normal text ดี 👌
  • Fake computer-generated small caps ไม่ blend ดู unprofessional 😒

ตัวอย่าง Real Small Caps

Real small caps font ที่ blend กับ normal case สวย:

วิธีใช้ CSS font-variant Property (สำหรับ Small Caps)

เพราะ font family Alegreya มี real small caps

ตัวอย่าง Fake Small Caps

Fake small-caps font:

Notice how these small caps don't naturally blend in with the regular text case.

ตัวอย่างนี้ก็ใช้ Alegreya แต่ disable Alegreya SC font face ให้เห็น fake version

ลักษณะข้อความกับ font-variant: small-caps ขึ้นอยู่กับว่า typeface มี real small caps หรือไม่

Real small caps นادرة ก่อนใช้ font-variant: small-caps ใน stylesheet ต้อง:

  1. Research ว่า typeface มี real small-caps ไหม (ระบุโดย typeface designer)
  2. ถ้ามี ต้อง enable ให้ถูกต้อง

มิฉะนั้น ลืม property นี้ไปเลย

font-variant จะ auto-access OpenType small caps ถ้ามี แต่ยังต้อง import เข้าโปรเจกต์ (เหมือน font อื่น) ถ้าไม่ import จะ fallback เป็น computer-generated garbage small caps — ที่ไม่ได้อยากให้เกิดขึ้น