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までフォントウェイトを変えた文字列を表示します。
レギュラーのウェイトとボールドのウェイトの2種類が表示されます。
レギュラーのウェイトとボールドのウェイト、さらに太いヘビーのウェイトの3種類が表示されます。
こちらも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'を使用する動作とします。
3つのWebブラウザでほぼ同じ表示となりました。
一般的には'Helvetica Neue'が存在しない場合は、'Helvetica'を利用する下記の記述を利用することが多いです。
body {
font-family: 'Helvetica Neue','Helvetica';
}
表示フォントファミリーを 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;
}
