คุณสมบัติ font-style ใน CSS (รูปแบบตัวอักษร)

คุณสมบัติ font-style ใน CSS ใช้ระบุรูปแบบตัวอักษร: normal, italic, oblique

ไวยากรณ์ (Syntax)

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

ตัวอย่างที่ 1: Italic และ Oblique

<!DOCTYPE html>
<html>
<head>
  <style>
    h2 { font-style: italic; background-color: steelblue; color: white; }
    p { font-style: oblique 10deg; }
  </style>
</head>
<body>
  <h2>Fortran Tutorial for Beginners</h2>
  <p>Fortran, as derived from Formula Translating System, is a general-purpose, imperative programming language.</p>
  <p>It is used for numeric and scientific computing.</p>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: Italic Heading และ Oblique List Items

<!DOCTYPE html>
<html>
<head>
  <style>
    h3 { font-style: italic; background-color: mediumpurple; color: white; text-align: center; }
    li { font-family: "Comic Sans MS", cursive; font-style: oblique 5deg; }
  </style>
</head>
<body>
  <h3>Developers Best Practices Tutorial</h3>
  <ul>
    <li>Documentation is the key</li>
    <li>Follow the standards</li>
    <li>Write to be Reviewed</li>
  </ul>
</body>
</html>

ผลลัพธ์

ความแตกต่าง Italic vs Oblique

ค่าที่ใช้ได้

• normal | italic | oblique | oblique <angle> (เช่น oblique 15deg, ช่วง -90deg ถึง 90deg)

Font Shorthand

/* font: style weight size/line-height family */
font: italic bold 16px/1.5 "Helvetica", sans-serif;
font: oblique 10deg 400 1rem/1.6 system-ui;

Performance Note

• italic ต้องโหลด font file แยก (italic variant) - ใช้ bandwidth มากกว่า
• oblique สร้างโดย browser - ไม่ต้องโหลดเพิ่ม แต่คุณภาพอาจต่ำกว่า
• Variable Fonts รองรับ font-style: oblique 0deg 20deg (range)