font-style
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
font-style は CSS の記述子で、 @font-face アットルールの中で指定されたフォントのフォントスタイルを指定することができます。
特定のフォントファミリーについて、同じフォントファミリーの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 font-style 記述子を使用してフォントフェイスのスタイルを正確に指定することができます。この CSS 記述子の値は対応する font-style プロパティと同じです。
構文
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-styleがobliqueであるときにだけ対応しています。font-style: normal又はitalicの場合は、第二の値は許可されません。
公式定義
| 関連するアット規則 | @font-face |
|---|---|
| 初期値 | normal |
| 計算値 | 指定通り |
形式文法
font-style =
auto |
normal |
italic |
left |
right |
oblique [ <angle [-90deg,90deg]>{1,2} ]?
例
イタリックフォントスタイルの指定
例として、 garamond フォントファミリーを指定すると、基本の形として、以下の結果が得られます。
@font-face {
font-family: garamond;
src: url("garamond.ttf");
}
このテキストのイタリック版は、スタイルなしの版と同じ字形を使用しますが、人工的に数度だけ傾けてあります。
一方で、フォントファミリーに真にイタリックである版がある場合、 src 記述子を含めてそのフォントがイタリックだと指定することで、フォントがイタリックになることが明確になります。本当のイタリックは異なる字形を用い、少し右上に傾いており、いくらか固有の特徴を持ち、一般に丸みを帯びており、筆記体に似た品質です。これらのフォントはフォントのデザイナーによって特別に作成されたものであり、人工的に傾けたものではありません。
@font-face {
font-family: garamond;
src: url("garamond-italic.ttf");
font-style: italic;
}
仕様書
| Specification |
|---|
| CSS Fonts Module Level 4 # font-prop-desc |
ブラウザーの互換性
Loading…