古いNoto Sans Japaneseで一部の文字が細くなる
WebサイトをChromeで閲覧していると、たまに文字の一部が他の文字より細く表示されてしまっていることがあります。
これはGoogleフォントで古いNoto Sans JapaneseのCSSが読み込まれていることが原因の可能性があります。
古いNoto Sans Japaneseのfont-weight: 300; などの数値による太さに全文字が対応していないので、これらの文字を使用すると下図のように太い文字と細い文字が混在してしまいます。
また、CSSが古いとfont-familyの指定が「Noto Sans JP」ではなく「Noto Sans Japanese」になっていることが多いです。
HTML
<p class="sample">大﨑で𠮷野家の牛丼を食べる草彅</p>CSS
/* 古いNoto Sans Japaneseを読み込んでいる例 */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
.sample {
font-family: "Noto Sans Japanese", sans-serif;
font-size: 3rem;
font-weight: 300;
}SafariやEdgeだと「font-weight: 300;」が適用されないだけなのですが、Chromeだと文字に太さに違いが出るので、文章の見た目が悪くなってしまいます。
最新のNoto Sans Japaneseを読み込む方法
Chromeで文字によって太さが変わる問題は最新のNoto Sans Japaneseを読み込むことで解決できます。
最新のNoto Sans Japaneseを読み込むにはHTML内に以下のコードを貼り付けて、CSSでfont-familyとfont-optical-sizingを指定します。
HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<p class="sample">大﨑で𠮷野家の牛丼を食べる草彅</p>CSS
.sample {
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-size: 3rem;
font-weight: 300;
}font-optical-sizingはフォントのサイズが小さいときは、細かいディテールを省略して読みやすくし、大きいときはデザイン性を強調するといった自動調整のプロパティです。
@importで読み込む方法もありますが、@importはCSSの読み込みが遅いので使わないほうが良いです。
最新のNoto Sans Japaneseを使用したサンプル
