home

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

คุณสมบัติ font-variant ใน CSS

คุณสมบัติ font-variant เป็น shorthand สำหรับคุณสมบัติย่อยๆ ได้แก่ font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian

ไวยากรณ์ (Syntax)

Selector {
  font-variant: /*value*/;
}

ตัวอย่างที่ 1: Small-caps และ All-petite-caps

<!DOCTYPE html>
<html>
<head>
  <style>
    table * { box-shadow: inset 0 0 10px lavender; font-size: 1.2em; font-variant: small-caps; }
    td + td { font-variant: all-petite-caps; }
  </style>
</head>
<body>
  <table>
    <tr><th>DEMO a</th><th>DEMO b</th></tr>
    <tr><td>1a</td><td>1b</td></tr>
    <tr><td>2a</td><td>2b</td></tr>
  </table>
</body>
</html>

ผลลัพธ์

คุณสมบัติ font-variant ใน CSS

ตัวอย่างที่ 2: Unicase

<!DOCTYPE html>
<html>
<head>
  <style>
    div { display: flex; margin: 20px; width: 20%; float: left; box-shadow: inset 0 0 9px orange; }
    #demo { font-variant: unicase; }
  </style>
</head>
<body>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque felis ac lorem ornare maximus.</div>
  <div id="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque felis ac lorem ornare maximus.</div>
</body>
</html>

ผลลัพธ์

คุณสมบัติ font-variant ใน CSS

Sub-properties ของ font-variant

Sub-propertyคำอธิบายค่าตัวอย่าง
font-variant-capsควบคุมตัวพิมพ์เล็ก/ใหญ่small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps
font-variant-numericควบคุมการแสดงตัวเลขlining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, slashed-zero
font-variant-alternatesใช้ glyph alternativeshistorical-forms, stylistic(n), styleset(n), character-variant(n), swash(n), ornaments(n), annotation(n)
font-variant-ligaturesควบคุม ligaturescommon-ligatures, discretionary-ligatures, historical-ligatures, contextual, no-common-ligatures
font-variant-east-asianควบคุม glyphs ภาษาเอเชียตะวันออกjis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby

ค่าสำหรับ font-variant-caps (ยอดนิยม)

  • normal - ปกติ
  • small-caps - ตัวเล็กแทนตัวพิมพ์เล็ก (lowercase → small caps)
  • all-small-caps - ทุกตัวเป็น small caps (uppercase → small caps ด้วย)
  • petite-caps - เหมือน small-caps แต่ขนาดเล็กกว่า (ต้องมี font support)
  • all-petite-caps - ทุกตัวเป็น petite-caps
  • unicase - ผสม uppercase และ small-caps
  • titling-caps - ตัวอักษรสำหรับหัวข้อ (titling capitals)

ข้อสังเกต

  • ต้องใช้ Font ที่รองรับ OpenType features (เช่น font-variant-numeric: tabular-nums สำหรับตัวเลขจัดตาราง)
  • Variable Fonts รองครองคุณสมบัติเหล่านี้ได้ดีที่สุด
  • font-variant shorthand รีเซ็ต sub-properties ทั้งหมด ถ้าใช้ค่าที่ไม่รองรับจะ fallback เป็น normal