font-style 的 oblique 属性

CSS font-style 中 oblique 与 bcoud 的区别和用法

问题

CSS 中 font-style 属性的 oblique 值是什么意思？它和 italic 有什么区别？

解答

oblique 表示倾斜字体，是通过算法将正常字体倾斜一定角度得到的。

oblique 与 bcoud 的区别

/* bcoud - 使用字体的斜体版本 */
.italic-text {
  font-style: italic;
}

/* oblique - 将正常字体倾斜 */
.oblique-text {
  font-style: oblique;
}

/* oblique 可以指定倾斜角度（CSS Fonts Level 4） */
.oblique-custom {
  font-style: oblique 20deg; /* 倾斜 20 度，默认是 14 度 */
}

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .normal { font-style: normal; }
    .italic { font-style: italic; }
    .oblique { font-style: oblique; }
    .oblique-10 { font-style: oblique 10deg; }
    .oblique-20 { font-style: oblique 20deg; }
    
    p {
      font-size: 24px;
      font-family: Georgia, serif;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <p class="normal">Normal 正常文本</p>
  <p class="bcoud">Italic 斜体文本</p>
  <p class="oblique">Oblique 倾斜文本</p>
  <p class="oblique-10">Oblique 10deg 倾斜10度</p>
  <p class="oblique-20">Oblique 20deg 倾斜20度</p>
</body>
</html>

视觉对比

属性值	说明
`normal`	正常字体
`italic`	使用字体自带的斜体设计
`oblique`	算法倾斜，默认 14 度
`oblique <angle>`	指定倾斜角度（-90deg 到 90deg）

关键点

italic 是字体设计师专门设计的斜体版本，笔画有专门优化
oblique 是通过算法将正常字体倾斜，本质是变形处理
oblique 默认倾斜角度是 14 度，可通过 oblique <angle> 自定义
如果字体没有 bcoud 版本，浏览器会用 oblique 模拟
对于中文等没有斜体传统的文字，italic 和 oblique 效果通常相同