フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

モダンフロントエンドの進む道

バンドルされた標準的な日本語フォントをただただ使いたいだけなのに、ちまたにあふれる指定は煩雑!
できるだけシンプルにfont-familyを指定したい!

デモ

まず調査

デバイス
ブラウザ
指定無し sans-serif serif
iOS
Safari
ヒラ明朝 ヒラ角ゴ ヒラ明朝
Android
Chrome
NotoSans NotoSans NotoSans
Windows10
Edge / IE11
MSPゴ メイリオ MS明朝
Windows10
Chrome / Firefox
メイリオ メイリオ 游明朝
Windows7
IE11
MSPゴ メイリオ MS明朝
Windows7
Chrome / Firefox
メイリオ メイリオ MSP明朝
Mac
Safari
ヒラ明朝 ヒラ角ゴ ヒラ明朝
Mac
Chrome / Firefox
ヒラ角ゴ ヒラ角ゴ ヒラ明朝

※ ブラウザの初期設定の場合です
※ lang=”ja”を指定しないと英数字は英文フォントが優先されます

考察

  • 指定無しはSafariだけ明朝体になる
  • sans-serifは全てちゃんとゴシックになる。Windiows10でメイリオが表示されるのは好みがわかれるところ
  • serifもAndroid以外はちゃんと明朝体が表示される。游明朝バンドルされてるWindows10でもEdge, IE11はMS明朝を表示しちゃうのは嫌な人多いかな
  • どれでも絶対に明朝表示したい場合はウェブフォントが必要

プラン

ゴシックプランA – シンプルに

sans-serifだけでどんなデバイスでもちゃんとゴシックで表示される

.gothic-a {
    font-family: sans-serif;
}

ゴシックプランB – Windowsでは游ゴ

Macで游ゴ指定するには “YuGothic” なので表示されずヒラ角になる

.gothic-b {
    font-family: "Yu Gothic", sans-serif;
}

ゴシックプランC – Windowsの游ゴのウェイトを調整

Windowsで普通に游ゴを指定すると細いのでそれを調整

@font-face {
  font-family: "MyYuGo";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "MyYuGo";
  src: local("Yu Gothic Bold");
  font-weight: 700;
}

.gothic-c {
    font-family: "MyYuGo", sans-serif;
}

明朝プランA – シンプル

明朝がバンドルされてないAndroidは明朝表示されません

.mincho-a {
    font-family: serif;
}

明朝プランB – Windowsは游明朝に

WindowsのEdge, IE11が游明朝になります、Androidでは明朝表示されず

.mincho-b {
    font-family: 'Yu Mincho', serif;
}

明朝プランC – Noto Serif JP

シンプルにウェブフォントの力を借ります

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP" rel="stylesheet">
.mincho-c {
    font-family: 'Noto Serif JP', serif;
}

明朝プランD – AndroidのみNoto Serif JPを読み込む

Android以外は読み込まないので軽くなるけど、複雑な気がするので当初の趣旨に反するかな

デモ

<script>
// 読み込むか否かの判定は簡易にUAで判定
(function () {
    if (/android/i.test(navigator.userAgent)) {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://fonts.googleapis.com/css?family=Noto+Serif+JP';
        document.head.appendChild(link);
    }
})();
</script>
.mincho-d {
    font-family: 'Noto Serif JP', 'Yu Mincho', serif;
}
[紹介元] CSSタグが付けられた新着記事 – Qiita モダンフロントエンドの進む道

コメント

記事に戻る

コメントを残す