font-family に複数のフォントを指定する場合の動作について - CSS
CSSのfont-familyプロパティに複数のフォントを指定する場合の動作について紹介します。
概要
CSSのfont-familyプロパティに複数の値を記述した場合は、先頭に記述したフォントから順次判定します。一致したフォントがあった場合にはそのフォントが利用されます。
例
下記のfont-family が記述されている場合、まず、font_A がシステムにインストールされているか確認します。font_Aがインストールされていれば、font_Aでテキストは描画されます。font_Aがインストールされていない場合は、font_B がインストールされていればfont_Bで描画し、font_Bもインストールされていなければ、font_Cで文字を描画をします。
font-family : font_A, font_B, font_C;
例:日本語の場合
下記のfont-familyが記述されており、本文が日本語の場合も左から順番に判定する動作になります。しかし、半角英数は英語フォントが利用されますが、日本語には英語フォントは対応していませんので、以下の動作になります。
font-family : font_Latin_A, font_Latin_B, font_Latin_C, font_Japanese_A, font_Japanese_B;
(font_Latin_A, font_Latin_B, font_Latin_C は英語フォント、font_Japanese_A, font_Japanese_B は日本語フォント)
| 英数文字 | 日本語文字 |
|---|
| すべてのフォントがインストールされている | font_Latin_A | font_Japanese_A |
| font_Latin_A がインストールされていない | font_Latin_B | font_Japanese_A |
| font_Latin_A, font_Japanese_A がインストールされていない | font_Latin_B | font_Japanese_B |
コード例
コード
下記のCSS, HTMLを作成します。
.BizUDPGothic {
font-family: "BIZ UDPGothic";
font-size: 18px;
}
.BizUDPGothicLatin {
font-family: Arial,"BIZ UDPGothic";
font-size: 18px;
}
.BizUDPMincho {
font-family: "BIZ UDPMincho";
font-size: 18px;
}
.BizUDPMinchoLatin {
font-family: "Times New Roman","BIZ UDPMincho";
font-size: 18px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="CssBizUDFontLatin.css" />
</head>
<body>
<div class="BizUDPGothic">あのイーハトーヴォ(Ihatovo)のすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市(Molio city)、郊外のぎらぎらひかる草の波。(BIZ UDPゴシック)</div>
<hr />
<div class="BizUDPGothicLatin">あのイーハトーヴォ(Ihatovo)のすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市(Molio city)、郊外のぎらぎらひかる草の波。(BIZ UDPゴシック + Arial)</div>
<hr />
<div class="BizUDPMincho">あのイーハトーヴォ(Ihatovo)のすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市(Molio city)、郊外のぎらぎらひかる草の波。(BIZ UDP明朝+ Times New Roman)</div>
<hr />
<div class="BizUDPMinchoLatin">あのイーハトーヴォ(Ihatovo)のすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市(Molio city)、郊外のぎらぎらひかる草の波。(BIZ UDP明朝 + Times New Roman)</div>
</body>
</html>
解説
BizUDPGothic, BizUDPMincho クラスはfont-family で BIZ UDゴシック、または、BIZ UD明朝のみが指定されているため、日本語文字も英数字も含めてすべて、BIZ UDフォントで描画されます。
一方、BizUDPGothicLatin, BizUDPMinchoLatin クラスは最初に英語フォントが指定されています。そのため、BizUDPGothicLatin クラスであれば、英数文字はArialのフォントで描画され、日本語の文字はBIZ UDゴシックで描画されます。BizUDPMinchoLatin クラスは英数文字はTimes New Roman のフォントで描画され、日本語の文字はBIZ UD明朝で描画されます。
表示結果
BizUDPGothic, BizUDPMincho クラスは英数文字のフォントが全角文字のように幅の広い文字で表示されます。一方、BizUDPGothicLatin, BizUDPMinchoLatin クラスを指定したフォントは英数文字は、Arial, Times New Romanが使われるため、英数文字の文字幅が狭くなっていることがわかります。
また、Arial, Times New Romanを組み合わせた設定のほうが行間が少し広く開くことも確認できます。これは、Arial, Times New Romanのフォントのレディングのサイズが大きいためです。
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
