ウェブデザインにおいて、特定の文字だけ異なるフォントを適用したいことはよくあります。例えば、数字だけスタイリッシュなフォントにしたり、アルファベットだけ別のフォントにしてデザインの統一感を出したりすることができます。

今回は、CSS で数字やアルファベットなど特定の文字だけ別のフォントに変更する方法を解説します。

特定の文字だけ別のフォントに変更する方法

@font-faceのunicode-rangeで、Unicode の文字範囲を指定することで、特定の文字のみにフォントを適用することが可能です。

数字だけ別のフォントに変更する場合

数字（0～9）の Unicode 範囲はU+0030-0039です。

以下のコードでは、数字のみにArialを適用し、それ以外の文字は游ゴシックが適用されます。太字も使う場合は、font-weightでボールド体の@font-faceも別で指定します。

@font-face {
  font-family: "Number";
  src: local("Arial");
  unicode-range: U+0030-0039; /* 0-9 */
}

@font-face {
  font-family: "Number";
  src: local("Arial Bold");
  font-weight: bold;
  unicode-range: U+0030-0039; /* 0-9 */
}

body {
  font-family: "Number", "Yu Gothic Medium", sans-serif;
}

See the Pen Untitled by YUTSUZO (@YUTSUZO) on CodePen.

アルファベットだけ別のフォントに変更する場合

アルファベットの Unicode 範囲は以下の通りです。

  • 大文字 (A–Z): U+0041-005A
  • 小文字 (a–z): U+0061-007A

unicode-rangeはカンマ区切りで複数指定が可能です。以下のコードでは、アルファベットのみにTahomaを適用し、それ以外の文字には游ゴシックが適用されます。太字を使う場合は、font-weightでボールド体用の@font-faceも別で指定します。

@font-face {
  font-family: "Alphabet";
  src: local("Tahoma");
  unicode-range: U+0041-005A, U+0061-007A; /* A-Z, a-z */
}

@font-face {
  font-family: "Alphabet";
  src: local("Tahoma Bold");
  font-weight: bold;
  unicode-range: U+0041-005A, U+0061-007A; /* A-Z, a-z */
}

body {
  font-family: "Alphabet", "Yu Gothic Medium", sans-serif;
}

See the Pen @font-face unicode-range sample 02 by YUTSUZO (@YUTSUZO) on CodePen.

よく使われる他の Unicode 範囲

数字とアルファベット以外に、よく使用される Unicode 範囲としては以下のものがあります。

文字Unicode 範囲
数字 0–9U+0030-0039
英大文字 A–ZU+0041-005A
英小文字 a–zU+0061-007A
ひらがなU+3040-309F
カタカナU+30A0-30FF
漢字（CJK統合漢字）U+4E00-9FFF

このように、unicode-rangeを使えば、ひらがなやカタカナ、漢字などにも異なるフォントを個別に適用することが可能です。

参考