LoginSignup
15
11

More than 5 years have passed since last update.

シンプルにfont-familyを指定したい

Last updated at Posted at 2018-12-04

バンドルされた標準的な日本語フォントをただただ使いたいだけなのに、ちまたにあふれる指定は煩雑!
できるだけシンプルに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;
}
15
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
11