font-style 字体样式

概述

font-style 属性用于设置字体的样式,主要用于控制文本是否倾斜。

属性值

属性值	说明
`normal`	正常状态(默认值),不倾斜
`italic`	斜体,使用字体的斜体版本
`oblique`	倾斜,强制将文字倾斜显示

代码示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>font-style 示例</title>
    <style>
      .box1 i {
        font-style: normal;
      }
      .box2 {
        font-style: italic;
      }
      .box3 {
        font-style: oblique;
      }
    </style>
  </head>
  <body>
    <div class="box1"><i>这是正常的文字</i></div>
    <div class="box2">这是斜体文字(italic)</div>
    <div class="box3">这是倾斜文字(oblique)</div>
  </body>
</html>

属性值对比

1. normal(正常)

默认值
取消倾斜效果
常用于将 <i> 标签的文字恢复为正常样式

.box1 i {
  font-style: normal;
}

2. italic(斜体)

使用字体的专用斜体版本
如果字体没有斜体版本,会使用 oblique 作为后备
语义化的斜体

.box2 {
  font-style: italic;
}

3. oblique(倾斜)

强制将文字倾斜
不依赖字体的斜体版本
只是视觉上的倾斜效果

.box3 {
  font-style: oblique;
}

italic 与 oblique 的区别

特性	italic	oblique
字体来源	使用字体的斜体版本	强制倾斜普通字体
语义性	有语义(强调内容)	纯视觉效果
兼容性	需要字体支持斜体	所有字体都支持
推荐场景	强调、引用等	特殊视觉效果

实际应用场景

1. 引用文字

blockquote {
  font-style: italic;
  color: #666;
}

2. 取消斜体标签的默认样式

i {
  font-style: normal;
  font-family: Arial, sans-serif;
}

3. 特殊标题效果

h2.special {
  font-style: oblique;
  text-decoration: underline;
}

注意事项

默认行为: 默认值为 normal,不需要显式设置
继承性: font-style 会被子元素继承
兼容性: 所有现代浏览器都支持
语义考虑: 使用 <em> 或 <i> 标签表示语义上的强调,font-style 用于样式控制

css学习