テキストボックスで Google Chrome と Internet Explorer のフォントが異なる
Google Chrome と Internet Explorer でスタイル指定がない場合、テキストボックスのフォントが異なる現象について消化思惟します。
現象の確認
下図のHTMLファイルを準備します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>テキストボックスです</div>
<input type="text" name="text" style="width:240px;"/>
</body>
</html>
上記のHTMLをWebブラウザで表示し、テキストボックスに「ペンギン(Penguin)が氷山でジャンプ」の文字列を入力します。入力後の状態が下図になります。
Google Chrome の表示フォントが他のWebブラウザの表示フォントに比べ横幅が大きいことが確認できます。
Internet Explorer の場合
Google Chrome の場合
Microsoft Edge の場合
Windows 7の場合もGoogle Chrome の表示フォントはInternet Explorerの表示フォントに比べ横幅が大きいことが確認できます。また、Windows 10のIntgernet Explroerと Windows 7のInternet Explorerでテキストボックス内の文字の表示フォントが違うことも確認できます。
Internet Explorer の場合 (Windows 7)
Google Chrome の場合 (Windows 7)
原因
フォントを指定しない場合のデフォルトフォントがWebブラウザによって異なることが原因です。
デフォルトフォントは下記の設定となっています。
Windows 7 の場合
Webブラウザごとのテキストボックス(inputタグ)のデフォルトフォント
| Webブラウザ | 日本語フォント | 英文字フォント |
|---|
| Internet Explorer | メイリオ UI (Meiryo UI) | Arial |
| Google Chrome | メイリオ (Meiryo) | Arial |
Windows 10 の場合
Webブラウザごとのテキストボックス(inputタグ)のデフォルトフォント
| Webブラウザ | 日本語フォント | 英文字フォント |
|---|
| Internet Explorer | 游ゴシック UI (Yu Gothic UI) | Arial |
| Google Chrome | メイリオ (Meiryo) | Arial |
| Microsoft Edge | 游ゴシック UI (Yu Gothic UI) | Arial |
対処法 (Windows 10の場合)
テキストボックスのスタイルで"font-family"を設定し、明示的に表示するフォントを指定することで同じ表示にそろえることができます。
コード
下記のHTMLファイルを準備します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
.TextBox1 {
width: 240px;
font-family: Arial,'Yu Gothic UI';
}
-->
</style>
</head>
<body>
<div>テキストボックスです</div>
<input type="text" name="text" class="TextBox1"/>
</body>
</html>
解説
テキストボックスのinputタグにclass "TextBox1"を指定します。headタグ内の埋め込みスタイルシート部で
font-family: Arial,'Yu Gothic UI';
を指定し、テキストボックスのフォントの英文字をArial、日本語文字を游ゴシックで表示する設定とします。
表示結果
上記のHTMLをWebブラウザで表示し、表示されたページのテキストボックスに文字列を入力します。入力後の画面表示が下図になります。どのWebブラウザでも表示フォントが同じになっていることが確認できます。
Internet Explorer の場合
Google Chrome の場合
Microsoft Edge の場合
対処法 (Windows 7の場合)
テキストボックスのスタイルで"font-family"を設定し、明示的に表示するフォントを指定することで同じ表示にそろえることができます。
コード
下記のHTMLファイルを準備します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
.TextBox1 {
width: 240px;
font-family: Arial,'Meiryo UI';
}
-->
</style>
</head>
<body>
<div>テキストボックスです</div>
<input type="text" name="text" class="TextBox1"/>
</body>
</html>
解説
テキストボックスのinputタグにclass "TextBox1"を指定します。headタグ内の埋め込みスタイルシート部で
font-family: Arial,'Meiryo UI';
を指定し、テキストボックスのフォントの英文字をArial、日本語文字をメイリオUIで表示する設定とします。
表示結果
上記のHTMLをWebブラウザで表示し、表示されたページのテキストボックスに文字列を入力します。入力後の画面表示が下図になります。どのWebブラウザでも表示フォントが同じになっていることが確認できます。
Internet Explorer の場合
Google Chrome の場合
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最近は生成AIの画像生成の沼に沈んでいる。
