Segoe UI フォントの挙動 - Segoe UIフォントは日本語フォントなのか - CSS

Segoe UI フォントの挙動について紹介します。

Segoe UIフォントは日本語フォントなのか

Windows 10のUI用のフォントとして用意されているSegoe UIフォントですが、日本語のフォントであるか動作確認します。

コード

下記のHTML, CSSファイルを作成します。

CssSegoeUI.css

.SegoeUI {
    font-family: 'Segoe UI';
}

.SegoeUIMincho {
    font-family: 'Segoe UI', 'Yu Mincho';
}

CssSegoeUI.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link href="CssSegoe.css" rel="Stylesheet" type="text/css" />
</head>
<body>
  <span class="SegoeUI">Penguin : ペンギンは鳥だが泳げる。</span>
  <br />
  <span class="SegoeUIMincho">Penguin : ペンギンは鳥だが泳げる。</span>
</body>
</html>

解説

2つのCSSクラスを用意します。一つは SegoeUI クラスで 'Segoe UI' フォントのみを指定します。もう一つは、SegoeUIMincho クラスで'Segoe UI', 'Yu Mincho'フォントを指定します。Segoe UIフォントが日本語フォントであればどちらのクラスも、Segoe UIフォントで表示され、同じ字体が表示されます。Segoe UIフォントが欧文フォントである場合、SegoeUIMincho クラスでは日本語にマッチするフォントではないと判断され、次に指定されている游明朝が表示される動作になります。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
font-familyで 'Segoe UI', 'Yu Mincho' を指定すると、日本語の文字が游明朝で表示されるため、Segoe UI は欧文フォントの扱いであることがわかります。(日本語の字体は含んでいない)
また、font-familyで 'Segoe UI' のみを指定した場合は、日本語はブラウザのデフォルトのフォントが表示される動作になることがわかります。Microsoft Edge, Google Chromeはメイリオで表示され、Internet Explorer はMSゴシックのフォントで日本語文字が表示されます。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

Segoe UI フォントの挙動 - Segoe UIフォントは日本語フォントなのか - CSS

Segoe UIフォントは日本語フォントなのか

コード

解説

実行結果

関連するページ