初心者でも安心！ @font-face.font-style でウェブフォントをスタイリッシュに表示する方法

CSS @font-face.font-style 詳細解説

@font-face ルールは、Web ページにウェブフォントを埋め込むための重要な機能です。その中で、font-style プロパティは、フォントのスタイルを指定します。

プロパティ値

font-style プロパティには以下の値が指定できます。

• normal: 通常のスタイル。
• italic: イタリック体。
• oblique: 斜体。

補足

• italic と oblique は似ていますが、微妙な違いがあります。italic は真のイタリック体で、文字の形が変化します。一方、oblique は文字を傾けただけの斜体です。
• font-style プロパティは、font-family プロパティと組み合わせて使用します。
• ウェブフォントによっては、すべてのスタイルが利用できない場合があります。

使用例

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-style: normal;
}

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff") format("woff");
  font-style: italic;
}

h1 {
  font-family: "MyFont";
}

h2 {
  font-family: "MyFont";
  font-style: italic;
}

この例では、MyFont という名前のウェブフォントを2種類定義しています。1つは通常のスタイル、もう1つはイタリック体です。h1 タグは通常のスタイルで、h2 タグはイタリック体で表示されます。

@font-face ルールには、font-style プロパティ以外にも様々なプロパティがあります。詳細は上記の参考資料を参照してください。

注意

ウェブフォントを使用するには、ライセンス条項を確認する必要があります。

さまざまなスタイルのサンプルコード

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}

h1 {
  font-family: "MyFont";
}

このコードは、MyFont という名前のウェブフォントを通常のスタイルで適用します。

イタリック体のサンプルコード

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-style: italic;
}

h2 {
  font-family: "MyFont";
  font-style: italic;
}

このコードは、MyFont という名前のウェブフォントをイタリック体で適用します。

@font-face {
  font-family: "MyFont";
  src: url("myfont-bold.woff2") format("woff2");
  font-weight: bold;
}

h3 {
  font-family: "MyFont";
  font-weight: bold;
}

このコードは、MyFont という名前のウェブフォントを太字で適用します。

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-style: oblique;
}

h4 {
  font-family: "MyFont";
  font-style: oblique;
}

このコードは、MyFont という名前のウェブフォントを斜体で適用します。

小文字大文字のサンプルコード

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-variant: small-caps;
}

h5 {
  font-family: "MyFont";
  font-variant: small-caps;
}

このコードは、MyFont という名前のウェブフォントを小文字大文字で適用します。

上記以外にも、@font-face ルールを使ってさまざまなスタイルを適用することができます。詳細は以下の参考資料を参照してください。

注意

ウェブフォントを使用するには、ライセンス条項を確認する必要があります。

@font-face.font-style の代替方法

システムフォントを使用する

font-family プロパティでシステムフォントを指定することで、ウェブフォントを使用せずにスタイルを適用できます。

h1 {
  font-family: "Times New Roman", serif;
}

このコードは、h1 タグに Times New Roman フォントを適用します。ただし、ユーザーの環境によっては、このフォントがインストールされていない場合があります。

ウェブフォントサービスを使用する

Google Fonts や Adobe Fonts などのウェブフォントサービスは、さまざまなフォントを無料で提供しています。これらのサービスを使用すると、@font-face ルールを記述することなく、簡単にウェブフォントを適用できます。

画像を使用する

どうしても特定のスタイルが必要な場合は、画像を使用してフォントを表現することができます。ただし、画像ファイルは重くなるため、この方法はパフォーマンスに影響を与える可能性があります。

CSS Font Loading API は、ウェブフォントの読み込みを管理するための新しいAPIです。このAPIを使用すると、フォントの読み込み状況を監視し、フォントが読み込まれるまでフォールバックフォントを表示することができます。

各方法の比較

@font-face.font-style プロパティは、ウェブフォントのスタイルを指定する最も強力な方法です。ただし、状況によっては他の方法の方が適している場合があります。