Google Chrome で英数文字のフォントが太く表示される現象について紹介します。
現象
同じWebページをInternet ExplorerとGoogle Chrome で表示しているにもかかわらず、Google Chromeのほうが英数文字のフォントが太く表示されることがあります。
原因
一部のフォントでフォントウェイトの表示段階の切り替えが違うことが原因の一つに挙げられます。
コード例
下記のコードを記述します。
body {
font-family: 'Helvetica';
}
.text100{
font-weight: 100;
}
.text200 {
font-weight: 200;
}
.text300 {
font-weight: 300;
}
.text400 {
font-weight: 400;
}
.text500 {
font-weight: 500;
}
.text600 {
font-weight: 600;
}
.text700 {
font-weight: 700;
}
.text800 {
font-weight: 800;
}
.text900 {
font-weight: 900;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="StyleFontWeight.css" />
</head>
<body>
<div class="text100">The first Wednesday in every month was a Perfectly Awful Day</div>
<div class="text200">The first Wednesday in every month was a Perfectly Awful Day</div>
<div class="text300">The first Wednesday in every month was a Perfectly Awful Day</div>
<div class="text400">The first Wednesday in every month was a Perfectly Awful Day</div>
<div class="text500">The first Wednesday in every month was a Perfectly Awful Day</div>
<div class="text600">The first Wednesday in every month was a Perfectly Awful Day</div>
<div class="text700">The first Wednesday in every month was a Perfectly Awful Day</div>
<div class="text800">The first Wednesday in every month was a Perfectly Awful Day</div>
<div class="text900">The first Wednesday in every month was a Perfectly Awful Day</div>
</body>
</html>
解説
CSSで'Helvetica'のフォントで、フォントのウェイトを100から100刻みで900までフォントウェイトを変えた文字列を表示します。
表示結果
Internet Explorer での表示
レギュラーのウェイトとボールドのウェイトの2種類が表示されます。
Google Chrome での表示
レギュラーのウェイトとボールドのウェイト、さらに太いヘビーのウェイトの3種類が表示されます。
Microsoft Edge での表示
こちらもChromeと同様にレギュラーのウェイトとボールドのウェイト、さらに太いヘビーのウェイトの3種類が表示されます。
フォントのウェイトが800以上の場合、Internet Explorerではボールドのフォントが表示されますが、Goocle ChromeやMicrosoft Edge ではさらにウェイトの太いフォントが表示されます。このため、Google Chrome で英数文字のフォントがInternext Explorerで閲覧した場合よりも太く表示されます。
対処法
下記のコードを記述します。
body {
font-family: 'Helvetica Neue';
}
.text100{
font-weight: 100;
}
.text200 {
font-weight: 200;
}
.text300 {
font-weight: 300;
}
.text400 {
font-weight: 400;
}
.text500 {
font-weight: 500;
}
.text600 {
font-weight: 600;
}
.text700 {
font-weight: 700;
}
.text800 {
font-weight: 800;
}
.text900 {
font-weight: 900;
}
解説
フォントファミリーの指定を "font-family: 'Helvetica Neue' とすることで、'Helvetica Neue'を使用する動作とします。
表示結果
Internet Explorer での表示
Google Chrome での表示
Microsoft Edge での表示
3つのWebブラウザでほぼ同じ表示となりました。
補足
一般的には'Helvetica Neue'が存在しない場合は、'Helvetica'を利用する下記の記述を利用することが多いです。
body {
font-family: 'Helvetica Neue','Helvetica';
}
参考:フォントファミリーを sans-serif に設定した場合
表示フォントファミリーを sans-serif に設定した場合もInternet Explorer とGooglke Chrome とでフォントの表示が異なる現象が発生します。
body {
font-family: 'sans-serif';
}
.text100{
font-weight: 100;
}
.text200 {
font-weight: 200;
}
.text300 {
font-weight: 300;
}
.text400 {
font-weight: 400;
}
.text500 {
font-weight: 500;
}
.text600 {
font-weight: 600;
}
.text700 {
font-weight: 700;
}
.text800 {
font-weight: 800;
}
.text900 {
font-weight: 900;
}
表示結果
Internet Explorer での表示
Google Chrome での表示
Microsoft Edge での表示
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2017-12-09
作成日: 2017-10-10
