複数行テキストボックス(textareaタグ)で Google Chrome と Internet Explorer の英文字フォントが異なる
複数行のテキストボックス(textareaタグ)でフォントを指定しない場合、複数行テキストボックス(TextArea)で Google Chrome と Internet Explorer の英文字フォントが異なる現象について紹介します。
現象
下図のHTMLファイルを用意します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>複数行テキストの入力欄です</div>
<textarea name="text" cols="50" rows="10"></textarea>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示すると、Webブラウザごとに下図の表示結果となります。
Internet Explorer の場合
Google Chrome の場合
Microsoft Edge の場合
Google Chromeの表示とInternet Explorer の表示でアルファベット文字のフォントが異なっていることが分かります。
原因
フォントを指定しない場合のデフォルトフォントがWebブラウザによって異なることが原因です。
デフォルトフォントは下記の設定となっています。
Windows 7 の場合
WebブラウザごとのTextAreaのデフォルトフォント
| Webブラウザ | 日本語フォント | 英文字フォント |
|---|
| Internet Explorer | MS ゴシック (MS Gothic) | Courier New |
| Google Chrome | MS ゴシック (MS Gothic) | MS ゴシック (MS Gothic) |
Windows 10 の場合
WebブラウザごとのTextAreaのデフォルトフォント
| Webブラウザ | 日本語フォント | 英文字フォント |
|---|
| Internet Explorer | MS ゴシック (MS Gothic) | Courier New |
| Google Chrome | MS ゴシック (MS Gothic) | MS ゴシック (MS Gothic) |
| Microsoft Edge | MS ゴシック (MS Gothic) | Courier New |
対処法
textareaタグのstyleでfont-familyを指定、またはtextareaのスタイルのCSSでfont-familyを指定し、フォントを"Courier New"に指定することでInternet Explorerと同じフォントで表示できます。
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
.textarea1 {
font-family: 'Courier New','MS Gothic';
}
-->
</style>
</head>
<body>
<div>複数行テキストの入力欄です</div>
<textarea name="text" cols="50" rows="10" class="textarea1"></textarea>
</body>
</html>
解説
texarea タグのクラス(textarea1)に対して、font-family で表示するフォントを明示的に指定します。フォントは'Courier New' を利用し、フォントが存在しなければ’MS Gothic'を利用する設定とします。この設定で英文字はは'Courier New'が利用され、日本語は'MS ゴシック'で表示されます。
表示結果
上記のHTMLファイルをWebブラウザで表示し、TextAreaに文字列を入力します。入力後の表示画面は下図となります。
Internet Explorer の場合
Google Chrome の場合
Microsoft Edge の場合
それぞれのブラウザで同じフォントで表示され、フォント未設定時のInternet Explroerと同じ表示になりました。
補足
テキストボックス(inputタグ)ではフォントを指定しない場合のデフォルトの動作ではTextAreaタグとは異なるフォントの表示になります。テキストボックスのフォントの違いについては
こちらの記事を参照してください。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
