CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのfont-variantプロパティとは？使い方と実例をわかりやすく解説

CSSのfont-variantプロパティは、テキストの字形（グリフ）のバリエーションを指定するためのショートハンド（一括指定）プロパティです。このプロパティを使うことで、以下の個別プロパティの値をまとめて設定できます。

  • font-variant-caps（大文字・小文字の字形）
  • font-variant-numeric（数字の字形）
  • font-variant-alternates（代替字形）
  • font-variant-ligatures（合字）
  • font-variant-east-asian（東アジア言語向けの字形）

構文

font-variantプロパティの基本的な書き方は次のとおりです。

Selector {
   font-variant: /*値*/;
}

それでは、実際のコード例を見ながらfont-variantプロパティの動作を確認していきましょう。

サンプルコード①：small-caps と all-petite-caps

<!DOCTYPE html>
<html>
<head>
<style>
table * {
   box-shadow: inset 0 0 10px lavender;
   font-size: 1.2em;
   font-variant: small-caps;
}
td + td {
   font-variant: all-petite-caps;
}
</style>
</head>
<body>
<table>
<tr>
<th>DEMO a</th>
<th>DEMO b</th>
</tr>
<tr>
<td>1a</td>
<td>1b</td>
</tr>
<tr>
<td>2a</td>
<td>2b</td>
</tr>
</table>
</body>
</html>

表示結果

上記のコードを実行すると、次のような出力が得られます。

CSSのfont-variantプロパティとは？使い方と実例をわかりやすく解説

この例では、small-capsによって小文字がスモールキャップス（小型の大文字）に変換され、all-petite-capsではすべての文字がさらに小さなプチキャップスで表示されます。

サンプルコード②：unicase

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   margin: 20px;
   width: 20%;
   float: left;
   box-shadow: inset 0 0 9px orange;
}
#demo {
   font-variant: unicase;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque felis ac lorem ornare maximus.</div>
<div id="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque felis ac lorem ornare maximus.</div>
</body>
</html>

表示結果

上記のコードを実行すると、次のような出力が得られます。

CSSのfont-variantプロパティとは？使い方と実例をわかりやすく解説

unicaseを指定すると、大文字と小文字の区別がなくなり、単一のケース（ユニケース）で統一された字形でテキストが表示されます。対応フォントでのみ有効になる点に注意してください。

主なfont-variantの値まとめ

  • normal：通常の字形を使用（デフォルト）
  • small-caps：小文字をスモールキャップスで表示
  • all-small-caps：すべての文字をスモールキャップスで表示
  • petite-caps / all-petite-caps：より小さなプチキャップスで表示
  • unicase：大小文字を区別しない字形で表示
  • titling-caps：タイトル用の大型キャップスで表示

font-variantプロパティを活用することで、フォントファイルを追加することなく、タイポグラフィに変化をつけた洗練されたデザインを実現できます。ただし、表示結果は使用しているフォントが対応しているかどうかに依存するため、実装時には複数の環境で確認することをおすすめします。

  1. CSSのfont-styleプロパティとは？イタリック・斜体の指定方法を解説

    CSSのfont-styleプロパティは、要素のテキストに対して「通常（normal）」「イタリック（italic）」「斜体（oblique）」のいずれかのスタイルを指定するために使用されます。italicはフォント自体が持つ斜めの書体を利用するのに対し、obliqueはテキストを指定した角度で傾けられる点が特徴です。 構文 CSSのfont-styleプロパティの構文は以下のとおりです。 Selector { font-style: /*値*/ } 指定できる主な値 normal … 通常の書体を表示します（初期値）。 italic … フォントのイタリック体（斜めの書体）を表示

  2. CSSのfont-sizeプロパティとは？フォントサイズの指定方法を実例付きで解説

    CSSのfont-sizeプロパティは、テキストのフォントサイズ（文字の大きさ）を設定するために使用されるプロパティです。値はパーセンテージ（%）や、px（ピクセル）、cm、pt（ポイント）、emなどの単位、さらには絶対的なキーワードによって指定できます。特に相対的な値を使用することで、ユーザーがブラウザの設定を変更しても文字サイズが追従し、アクセシビリティを最大限に高めることができます。なお、フォントサイズのデフォルト値は16px（または12pt）です。構文CSSのfont-sizeプロパティの基本構文は以下の通りです。セレクタ { font-size: /*値*/ }font-si