font-style

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

font-style CSS 描述符允許作者為 @font-face 規則中指定的字型指定字型樣式。

對於某個特定的字型家族,作者可以下載對應同一字型家族不同樣式的各種字型字形,然後使用 font-style 描述符來明確指定字型字形的樣式。此 CSS 描述符的值與對應的 font-style 屬性的值相同。

語法

css
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 30deg;
font-style: oblique 30deg 50deg;

normal

選擇字型家族的正常版本。

italic

指定字型字形是正常字型的斜體版本。

oblique

指定字型字形是正常字型的人工傾斜版本。

帶角度的 oblique

選擇歸類為 oblique 的字型,並額外指定文字傾斜的角度。

帶角度範圍的 oblique

選擇歸類為 oblique 的字型,並額外指定文字傾斜的允許角度範圍。請注意,只有當 font-styleoblique 時才支援範圍;對於 font-style: normalitalic,不允許使用第二個值。

正式定義

相關的 at-rule@font-face
初始值normal
計算值同指定值

正式語法

font-style = 
auto |
normal |
italic |
left |
right |
oblique [ <angle [-90deg,90deg]>{1,2} ]?

示例

指定斜體字型樣式

例如,考慮 garamond 字型家族,在正常形式下,我們得到以下結果

css
@font-face {
  font-family: "garamond";
  src: url("garamond.ttf");
}

unstyled Garamond

此文字的斜體版本使用與未樣式版本中相同的字形,但它們被人為傾斜了幾度。

artificially sloped garamond

另一方面,如果存在字型家族的真正斜體版本,我們可以將其包含在 src 描述符中並將字型樣式指定為 italic,以便明確該字型是斜體。真正的斜體使用不同的字形,並且與它們的直立對應物略有不同,具有一些獨特的特徵,通常具有圓潤和書法般的品質。這些字型由字型設計師專門建立,並且不是人為傾斜的。

css
@font-face {
  font-family: "garamond";
  src: url("garamond-italic.ttf");
  font-style: italic;
}

italic garamond

規範

規範
CSS 字型模組第 4 級
# font-prop-desc

瀏覽器相容性

另見