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

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