2018年のfont-family指定

サンセリフ編です。

## 目標
1. 欧文は[WIN]Segoe UI/[Mac]San Francisco, Helvetica Neueを使う。
1. 和文その1: 游ゴシックを使う(実はまだ厳しい気がしている)
1. 和文その2: Winにはメイリオ, Macにはヒラギノを使う。(推奨)

## 1. 欧文は[WIN]Segoe UI/[Mac]San Francisco, Helvetica Neueを使う。
それぞれ次のように指定すれば実現可能

```css
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 和文フォント指定, sans-serif;
```

指定順は次の通り。[]は記号内の指定順序を問う、{}は記号内の指定順序を問わないという記号である。

```
[{[{-apple-system, BlinkMacSystemFont}, "Helvetica Neue"], "Segoe UI"}, 和文フォント指定, sans-serif]
```


## 2. 和文その1: 游ゴシックを使う(実はまだ厳しい気がしている)

- windowsで細くレンダリングされてしまうのは、游ゴシックのウェイトがRegularで、これが特にChromeの独自レンダリングが影響で意図するものよりも細い。[参考記事](https://www.cherrypieweb.com/weblog/technical/20160726122243.php)
- また、この問題は@font-face指定でnormalをregularではなくmediumにすげ替えることで回避することができそう。[参考記事](http://qiita.com/RinoTsuka/items/1e7b3ca1325e704bbc41)
- Windows8.1ではそもそもMediumが無いので、死。
- ただ、IE11では游書体のメトリクスの参照先がOS/2のオブジェクトを使っているようで、line-heightが意図したものより若干大きく描画される。 -> **若干ゃつらい**
- また、Windows7, 8で游書体を入れてない場合はメイリオで表示になりそう -> **若干ゃつらい**

よってあまりおすすめできないが、やるならこうなる。

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Yu Gothic", YuGothic, sans-serif;
}
```

指定順は以下のような感じ。記号の使い方はさっきと一緒。

```
[{[{-apple-system, BlinkMacSystemFont}, "Helvetica Neue"], "Segoe UI"}, {"Yu Gothic", YuGothic}, sans-serif]
```

## 3. 和文その2: Winにはメイリオ, Macにはヒラギノを使う。

- めっちゃよくあるのが「macのデフォルトフォント→Windowsのデフォルトフォントの順」とする掟。
    - おそらくこの順でないとofficeの入ったmacでメイリオが表示されてしまうことを危惧してのもの
- ただ、この順番だと、windowsでヒラギノが入ってしまっているWeb製作者やクリエイターの環境ではヒラギノが表示される。(モリサワさん、ぜひモリパスのヒラギノは名前変えてください…難しいだろうけど…)
    - Windowsとヒンティングの入っていないヒラギノの相性は悪く、良くない表示を与えてしまう可能性が高い

以上の話は、やや宗教戦争臭く、随分前から所々で議論されているよう。
中には、jsでOSを判定し振り分けている解決策を見出すものもあるよう。

私も似たところでずっと悩んでいて調べたが、
検証した所、モダンWebブラウザでsans-serifを指定したときにメイリオで表示されないのは

- chrome56以前([issue](https://bugs.chromium.org/p/chromium/issues/detail?id=579842))
- Firefox

そしてなんと、Firefoxはバージョン55でデフォルトフォントを sans-serif: メイリオ/ serif: 游明朝 に変更するという結論を持つ[issue](https://bugzilla.mozilla.org/show_bug.cgi?id=548311)が出来ている。（メイリオだと斜体ができなかったのが課題としてあるようだが、これも割りとfirefox側で頑張って解決しようとしてる。賛否両論ありそうだが（汗））
バージョン55が出るのはロードマップを見ると8月あたりなので、ざっくり2018年ごろには浸透するのかなと。

そう考えると、2018年ごろには

```css
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
```

指定順は

```
[{[{-apple-system, BlinkMacSystemFont}, "Helvetica Neue"], "Segoe UI"}, sans-serif]
```


で指定すると、和文が意図通りWinユーザーはメイリオに、Macユーザーはヒラギノに提供できるかと。
issue見てて思ったけど、結構デフォルト　フォントを変えるのはページ全体の表示に関わるので、慎重になるみたい。dだからきっと他のブラウザは変わらないはず…？（IEは変わらないと思うし、唯一Edgeが游ゴの危険性があるけど、WindowsのアプリケーションはUIに游ゴシックUI、中身のコンテンツはメイリオで表示するアプリケーションが多かったので、もしかしたらメイリオのままな気がする、そんな気がしない？）

これもブラウザに見た目を握られる形になるので、実はそんなにいい話ではないが…。


## これでも良いのではないか？

- San FransiscoとHelvetica、contextual-alignとか無視すると、テクスチャとして見たときはそんなにHelvetica Neueと変わらない。
- デフォルトがSan Fransiscoで表示されるのはSafariぐらい。

だったら、

```css
font-family: sans-serif;
```
というのも、悪い話ではなさそう？

#### 注意したいこと
San Franciscoは、デフォルトでは数字が厳密にプロポーショナルなので、例えば動画時間の横に音量ボタンがあるなどの、変化する数字があって、それに位置が依存するボックスがあると、数字の横幅が変わって位置がガタついてしまう。
これは、San FranciscoにはOTFの機能でmonospacedな数字が用意してあるので、以下のようにfont-feature-settingsを設定すると良い。(autoprefixerな感じのものを使ってないときはprefixが必要。詳しくは[参考資料](https://helpx.adobe.com/jp/typekit/using/open-type-syntax.html#tnum)へ)

```css
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
```

これでしばらく平和になると良いな。