CSS - font-style 属性

CSS 的font-style属性用于指定所选文本的字体样式。它用于更改文本的外观或样式。

语法

font-style: normal | italic | oblique | initial | inherit;

属性值

值	描述
normal	文本以普通字体样式显示。默认值。
italic	文本以斜体样式显示，略微向右倾斜。
oblique	文本显示类似于斜体，但倾斜或角度更大。
initial	将属性设置为其初始值。
inherit	从父元素继承该属性。

CSS 字体样式属性示例

以下示例说明了使用不同值的font-style属性。

使用 Normal 值的字体样式属性

要显示文本而不向文本应用任何特殊样式，我们使用font-style属性的normal值。文本以默认的直立样式显示。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         text-align: center;
         padding: 25px;
         border: 2px solid #ccc;
         font-style: normal;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-style property
   </h2>
   <p>
      This text has "normal" font style.
   </p>
</body>

</html>

使用 Italic 值的字体样式属性

要以略微倾斜的方式显示文本，我们使用font-style属性的italic值。与默认的直立样式相比，文本呈现出倾斜效果。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         text-align: center;
         padding: 25px;
         border: 2px solid #ccc;
         font-style: italic;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-style property
   </h2>
   <p>
      This text has "italic" font style.
   </p>
</body>

</html>

使用 Oblique 值的字体样式属性

要以更大的倾斜方式显示文本，我们使用font-style属性的oblique值。与italic样式相比，文本呈现出更明显的倾斜效果。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         text-align: center;
         padding: 25px;
         border: 2px solid #ccc;
         font-style: oblique;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-style property
   </h2>
   <p>
      This text has "oblique" font style.
   </p>
</body>

</html>

支持的浏览器

属性
font-style	1.0	4.0	1.0	1.0	7.0

css_properties_reference.htm

打印页面