CSS3

@規則用記述子

font-style

  編集:2022.07.11 by T.A.

mdn

フォント スタイルの定義。

名前 font-style
用途 @font-face
normal | italic | oblique
初期値 normal

フォント書体の特徴を定義し、スタイルを特定の書体に合致させる処理に利用される。何個かの @font-face 規則により定義されるフォント ファミリー用には、ユーザー エージェントは、[ファミリーの中の書体をすべてダウンロードする]か、または[これらの記述子を利用して、[[文書の中で利用される実際のスタイル]に合致するフォント書体]を選択的にダウンロードする]ことができる。これらの記述子がとり得る値は、相対キーワード[bolderlighter]が許容されないことを除いて、対応するフォント プロパティがとり得る値と同じである。省略された記述子については、初期値をとるものと見なされる。

これらのフォント書体スタイル属性にあてがわれる値は、下層のフォント データにより黙示されるスタイルに代わって利用される。これにより、作者は、元々のフォント データが異なる形に配列されている状況下でも、いくつかの書体を柔軟に組み合せることが可能になる。合成な[bold 化/oblique 化]を実装するユーザー エージェントは、[フォントデータにより黙示されるスタイル属性]に基づいてではなく、フォント記述子から必要と黙示された所でのみ、合成なスタイル付けを適用するものとする。

@font-face {
  font-family: BaskervilleFull;
  src: url(baskerville-italic.woff);
  font-style: italic;
}

スタイル属性に[italic -style、normal -weight、normal -stretch]を持つフォントリソース baskerville-italic.woff を定義する。italic テキストを表示するときは、ユーザー エージェントは、italic テキストに最も近く合致する このフォントを利用することになる。従って、regular 体からのグリフを合成により oblique 化するのではなく、活字デザイナーによりデザインされたグリフを利用して、テキストが表示される。

¶画像省く

以下のCSSが組み込んであります:

<SPAN style="font-family:Test_Font; font-size:30px;
">ABCabcdefghij012*\</SPAN>

<SPAN style="font-family:Test_Font; font-size:30px;
 font-style:italic;
">ABCabcdefghij012*\</SPAN>


テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: