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ブラウザの表示フォントに比べ横幅が大きいことが確認できます。
Windows 7の場合もGoogle Chrome の表示フォントはInternet Explorerの表示フォントに比べ横幅が大きいことが確認できます。また、Windows 10のIntgernet Explroerと Windows 7のInternet Explorerでテキストボックス内の文字の表示フォントが違うことも確認できます。
フォントを指定しない場合のデフォルトフォントがWebブラウザによって異なることが原因です。
デフォルトフォントは下記の設定となっています。
| Webブラウザ | 日本語フォント | 英文字フォント |
|---|---|---|
| Internet Explorer | メイリオ UI (Meiryo UI) | Arial |
| Google Chrome | メイリオ (Meiryo) | Arial |
| Webブラウザ | 日本語フォント | 英文字フォント |
|---|---|---|
| Internet Explorer | 游ゴシック UI (Yu Gothic UI) | Arial |
| Google Chrome | メイリオ (Meiryo) | Arial |
| Microsoft Edge | 游ゴシック UI (Yu Gothic UI) | Arial |
テキストボックスのスタイルで"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タグ内の埋め込みスタイルシート部で
を指定し、テキストボックスのフォントの英文字をArial、日本語文字を游ゴシックで表示する設定とします。
上記のHTMLをWebブラウザで表示し、表示されたページのテキストボックスに文字列を入力します。入力後の画面表示が下図になります。どのWebブラウザでも表示フォントが同じになっていることが確認できます。
テキストボックスのスタイルで"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タグ内の埋め込みスタイルシート部で
を指定し、テキストボックスのフォントの英文字をArial、日本語文字をメイリオUIで表示する設定とします。
上記のHTMLをWebブラウザで表示し、表示されたページのテキストボックスに文字列を入力します。入力後の画面表示が下図になります。どのWebブラウザでも表示フォントが同じになっていることが確認できます。
