試一試
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 40deg;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
@font-face {
src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
font-family: "Amstelvar";
font-style: normal;
}
section {
font-size: 1.2em;
font-family: "Amstelvar", serif;
}
斜體字型通常具有草書性質，通常比其未樣式化的對應字型佔用更少的水平空間，而傾斜字型通常只是常規字型的傾斜版本。當指定的樣式不可用時，斜體和傾斜字型都會透過人工傾斜常規字型的字形來模擬（使用 font-synthesis 來控制此行為）。
語法
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;
/* Global values */
font-style: inherit;
font-style: initial;
font-style: revert;
font-style: revert-layer;
font-style: unset;
font-style 屬性指定為從以下值列表中選擇的單個關鍵字，如果關鍵字是 oblique，則可以選擇包含一個角度。
值
normal-
選擇在
font-family中歸類為normal的字型。 italic-
選擇歸類為
italic的字型。如果沒有可用的斜體版本，則使用歸類為oblique的版本。如果兩者都不可用，則人工模擬樣式。 oblique-
選擇歸類為
oblique的字型。如果沒有可用的傾斜版本，則使用歸類為italic的版本。如果兩者都不可用，則人工模擬樣式。 oblique<angle>-
選擇歸類為
oblique的字型，並額外指定文字傾斜的角度。如果所選字型家族中有一個或多個傾斜字型可用，則選擇與指定角度最接近的字型。如果沒有可用的傾斜字型，瀏覽器將透過將常規字型傾斜指定量來合成字型的傾斜版本。有效值為包含-90deg到90deg的度數值。如果未指定角度，則使用 14 度角。正值向行尾傾斜，而負值向行首傾斜。通常，對於請求的 14 度或更大角度，優先選擇更大的角度；否則，優先選擇更小的角度（有關精確演算法，請參閱規範的字型匹配部分）。
可變字型
可變字型可以對傾斜字型傾斜的程度進行精細控制。您可以使用 oblique 關鍵字的 <angle> 修飾符來選擇此選項。
對於 TrueType 或 OpenType 可變字型，"slnt" 變體用於實現傾斜字型的不同傾斜角度，而 "ital" 變體（值為 1）用於實現斜體值。請參閱 font-variation-settings。
點選下方程式碼塊中的“播放”以在 MDN Playground 中編輯示例。更改角度值以檢視文字傾斜的變化。
<p class="sample">
...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
@font-face {
src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
font-family: "AmstelvarAlpha";
font-style: normal;
}
.sample {
font:
2rem "AmstelvarAlpha",
sans-serif;
/* font-variation-settings: "slnt" 12; */
font-style: oblique 23deg;
}
無障礙
對於患有閱讀障礙等認知障礙的人來說，大段文字設定 font-style 值為 italic 可能會難以閱讀。
正式定義
| 初始值 | normal |
|---|---|
| 應用於 | 所有元素和文字。它也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 是 |
| 計算值 | 同指定值 |
| 動畫型別 | 按計算值型別；normal 動畫為 oblique 0deg |
正式語法
font-style =
normal |
italic |
left |
right |
oblique <angle [-90deg,90deg]>?
示例
字型樣式
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
規範
| 規範 |
|---|
| CSS 字型模組第 4 級 # font-style-prop |
瀏覽器相容性
載入中…