WebブラウザーでHTML表示時にフォントを指定しない場合に使用されるフォント

HTMLでfontを指定しない場合に描画に使用されるフォントを紹介します。

標準で利用されるフォント

以下の動作になります。

Windows 10/11
Webブラウザ	英数文字	日本語文字
Microsoft Edge	メイリオ	メイリオ
Microsoft Internet Explorer	Times New Roman	MS Pゴシック
Google Chrome	メイリオ	メイリオ
Mozila Firefox	メイリオ	メイリオ
Microsoft Edge(旧)	Times New Roman	メイリオ

MacOS 10.15
Webブラウザ	英数文字	日本語文字
Safari	New York	ヒラギノ明朝 (W3)
Google Chrome	New York	ヒラギノ明朝 (W3)

動作確認 (Windows 10)

コード

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

CssDefaultFont.css

.None{
    font-family:'';
}

.MSGothic {
    font-family: 'MS Gothic';
}

.Meiryo {
    font-family: 'Meiryo';
}

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

.YuGothic {
    font-family: 'Yu Gothic';
}

.TimesNewRoman {
    font-family: 'Times New Roman';
}

CssDefaultFont.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="CssDefaultFont.css" rel="Stylesheet" type="text/css" />
</head>
<body>
  <span class="None">Penguin : ペンギンは鳥だが泳げる。 (指定なし)</span>
  <br />
  <span class="MSGothic">Penguin : ペンギンは鳥だが泳げる。 (MSゴシック)</span>
  <br />
  <span class="Meiryo">Penguin : ペンギンは鳥だが泳げる。 (メイリオ)</span>
  <br />
  <span class="SegoeUI">Penguin : ペンギンは鳥だが泳げる。(Segoe UI)</span>
  <br />
  <span class="YuGothic">Penguin : ペンギンは鳥だが泳げる。 (游ゴシック)</span>
  <br />
  <span class="TimesNewRoman">Penguin : ペンギンは鳥だが泳げる。 (Times New Roman)</span>
</body>
</html>

表示結果

上記のHTMLファイルをWebブラウザで表示します。

指定なしの日本語文字がMSゴシックのフォントより詰まって表示されており、MS Pゴシックの表示であることがわかります。

動作確認 (MacOS 10.15)

コード

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

CssDefaultFontMac.css

.None{
    font-family:'';
}

.HiraginoW3 {
    font-family: 'HiraginoSans-W3';
    /*,'ヒラギノ角ゴシック W3', 'Hiragino Kaku Gothic Pro W3', 'HiraKakuPro-W3'; */
}

.HiraginoMinW3 {
    font-family: "HiraMinProN-W3";
    /*"ヒラギノ明朝 ProN W3"*/
}

.Lucida {
    font-family: 'LucidaGrande';
}

.NewYork {
    font-family: 'NewYork';
}

CssDefaultFont.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="CssStandardFontMac.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <span class="None">Penguin : ペンギンは鳥だが泳げる。 (指定なし)</span>
    <br />
    <span class="HiraginoMinW3">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ明朝 ProN W3)</span>
    <br />
    <span class="HiraginoW3">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ角ゴシック W3)</span>
    <br />
    <span class="Lucida">Penguin : ペンギンは鳥だが泳げる。 (Luchida Grande)</span>
    <br />
    <span class="NewYork">Penguin : ペンギンは鳥だが泳げる。 (NewYork)</span>
    <br />
</body>
</html>