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

列印頁面