【CSS初心者向け】＠font-face.font-styleでカスタムフォントの傾きや太さを自由自在に！

"@font-face.font-style" は、CSS の @font-face ルールで使用されるプロパティで、Web ページに埋め込むカスタムフォントのスタイルを指定します。これは、"Miscellaneous" カテゴリに属するプロパティであり、フォントの斜体、傾き、太さなどの視覚的な外観を制御するために使用されます。

構文

@font-face {
  font-family: 'Font Name';
  src: url('FontFile.woff') format('woff');
  font-style: normal | italic | oblique <angle> <angle>;
  /* その他のプロパティ */
}

プロパティの値

oblique <angle> <angle>: フォントを傾斜させます。最初の角度は、フォントが左に傾く程度を指定し、2番目の角度は、フォントが下に傾く程度を指定します。
italic: フォントを斜体で表示します。
normal: フォントを通常のスタイルで表示します。これがデフォルト値です。

例

以下の例では、"MyFont" という名前のカスタムフォントを定義し、そのスタイルを斜体に設定しています。

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

このフォントを要素に適用するには、font-family プロパティを使用します。

p {
  font-family: 'MyFont', sans-serif;
}

ほとんどのブラウザは、さまざまなフォントスタイルをサポートしていますが、古いブラウザでは一部のスタイルがサポートされない場合があります。
斜体のフォントは、読みやすさを損なう可能性があるため、慎重に使用することが重要です。
font-style プロパティは、フォントの太さを制御する font-weight プロパティとは異なります。

@font-face {
  font-family: 'MyFont1';
  src: url('MyFont1.woff') format('woff');
  font-style: italic;
}

@font-face {
  font-family: 'MyFont2';
  src: url('MyFont2.woff') format('woff');
  font-weight: bold;
}

h1 {
  font-family: 'MyFont1', sans-serif;
}

h2 {
  font-family: 'MyFont2', sans-serif;
}

このコードでは、まず "MyFont1" という名前のフォントを定義し、そのスタイルを斜体に設定しています。次に、"MyFont2" という名前のフォントを定義し、そのスタイルを太字に設定しています。

最後に、h1 要素には "MyFont1" フォントを、h2 要素には "MyFont2" フォントを適用するようにスタイルを設定しています。

この例は、@font-face ルールを使用して、Web ページにさまざまなスタイルのカスタムフォントを埋め込む方法を示すほんの一例です。

以下のコードは、font-style プロパティを使用して、フォントを斜めに傾ける方法を示しています。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff') format('woff');
  font-style: oblique 20deg 30deg;
}

このコードでは、"MyFont" という名前のフォントを定義し、20 度左に傾け、30 度下に傾けるように設定しています。

フォントファミリーの異なるスタイルのフォントファイルを別途用意する

これは、最も一般的で確実にフォントスタイルを制御できる方法です。具体的には、以下の手順で行います。

必要なスタイルのフォントファイルをそれぞれ用意します。例えば、通常のスタイル、イタリックスタイル、太字スタイルなどです。
それぞれのフォントファイルに対して、@font-face ルールを個別に定義します。このとき、font-style プロパティでスタイルを指定します。
各要素に、必要なスタイルに応じてfont-family プロパティでフォントファミリーを指定します。

例：

@font-face {
  font-family: 'MyFontRegular';
  src: url('MyFontRegular.woff') format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'MyFontItalic';
  src: url('MyFontItalic.woff') format('woff');
  font-style: italic;
}

@font-face {
  font-family: 'MyFontBold';
  src: url('MyFontBold.woff') format('woff');
  font-weight: bold;
}

p {
  font-family: 'MyFontRegular', sans-serif;
}

h1 {
  font-family: 'MyFontBold', sans-serif;
}

i {
  font-family: 'MyFontItalic', sans-serif;
}

この方法の利点は、確実に必要なスタイルのフォントを適用できることです。一方、欠点は、複数のフォントファイルを準備する必要があるため、管理の手間が増えることです。

"font-variant" プロパティを使用する

"font-variant" プロパティは、OpenType フォントの機能を制御するために使用できます。このプロパティを使用して、スモールキャップ、スモールキャピタル、スモールキャピタルテキストなどのスタイルを指定することができます。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff') format('woff');
  font-variant: small-caps;
}

p {
  font-family: 'MyFont', sans-serif;
}

この方法の利点は、1つのフォントファイルで複数のスタイルを表現できることです。一方、欠点は、すべてのブラウザで "font-variant" プロパティがサポートされているわけではないことです。

"font-feature-settings" プロパティを使用する

"font-feature-settings" プロパティは、OpenType フォントの高度な機能を制御するために使用できます。このプロパティを使用して、リガチャ、カーニング、スタイルセットなどの設定を指定することができます。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff') format('woff');
  font-feature-settings: "liga=on" "kern=on";
}

p {
  font-family: 'MyFont', sans-serif;
}

この方法の利点は、非常に詳細なフォントスタイルの制御が可能になることです。一方、欠点は、"font-feature-settings" プロパティが複雑で、すべてのブラウザでサポートされているわけではないことです。

どの方法を選択すべきか

どの方法を選択するかは、状況によって異なります。

非常に詳細なフォントスタイルの制御が必要な場合は、"font-feature-settings" プロパティを使用する 方法がおすすめです。
管理の手間を減らしたい場合は、"font-variant" プロパティを使用する 方法がおすすめです。
確実に必要なスタイルのフォントを適用したい場合は、フォントファミリーの異なるスタイルのフォントファイルを別途用意する 方法がおすすめです。

上記以外にも、フォントのスタイルを制御する方法があります。例えば、CSS の text-decoration プロパティを使用して、疑似フォントスタイルを適用することができます。

p {
  font-family: sans-serif;
  text-decoration: underline;
}