font-familyについて本気で考えてみた

今年はmacOSのアップデートによりヒラギノが動かなくなったり、
来年初頭にはWindows7がサポート終了、Edgeのブラウザエンジン変更など、
エンドユーザーの環境を考えなければならない節目の時です。

そこでいつもコピペで済ましている`font-family`について1から考え直してみます。
全部読もうとしている人はスクロールバーを見てから考えてください。



## 結果
コピペユーザーのために先に結果を記載します。
ブログ等に転載する場合はこのページのURLぐらい貼ってください。

```scss
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Original Yu Gothic", "Yu Gothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
}
```

Github: [RinoTsuka/jp-font-family](https://github.com/RinoTsuka/jp-font-family)

## 確認済み環境
| |IE11|Edge|Chrome|Firefox|safari|アルファベット|日本語|
|:--|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|Windows7| |-| | |-|Segoe UI|Original Yu Gothic|
|Windows7(Noto)| | | | |-|Segoe UI|Noto Sans CJK JP|
|Windows8.1| | | | |-|Segoe UI|Yu Gothic|
|Windows8.1(Noto)| | | | |-|Segoe UI|Noto Sans CJK|
|Windows10|○|○|○|○|-|Segoe UI|Original Yu Gothic|
|Windows10(Noto)| | | | |-|Segoe UI|Noto Sans CJK JP|
|macOS 10.12|-|-| | | |San Francisco|Hiragino Sans|
|macOS 10.13|-|-| | | |San Francisco|Hiragino Sans|
|macOS 10.14|-|-| | | |San Francisco|Hiragino Sans|
|macOS 10.15|-|-|○|○|○|San Francisco|Hiragino Sans|
|Ubuntu 18.04以上|-|-| | |-|Noto Sans CJK JP？|Noto Sans CJK JP|
|iOS 11未満|-|-|-|-| |HelveticaNeue|Hiragino Kaku Gothic ProN|
|iOS 11以上|-|-|-|-|○|San Francisco|Hiragino Sans|
|Android|-|-| |-|-|Roboto|Noto Sans CJK JP|

動作確認いただけましたらコメントで教えてもらえると幸いです。



## 考えたいこと
なんとなく書いてるけど「なんでこのような書き方をするの？」を考えてみます。



### 対象環境
環境のサポート状況や需要を考えて、対象環境を決めてみます。



#### ブラウザ
##### 対象ブラウザ
・Internet Explorer
・Edge
・Google Chrome
・Firefox
・safari
・safari(iOS)
・Chrome(And)
利用者数から対象ブラウザは上記とします。
さようならopera。（ブラウザエンジンはGoogle Chromeと同じなので大体Chromeと一緒です）



##### 対象バージョン
基本的には最新から2つ前までのバージョンぐらいで良いかなと考えています。2つ前にもなると利用者が大幅に減るためです。
そんなに`font-family`の仕様は変わらないのでブラウザのバージョンに神経質になる必要はないと思います。
ただしIEは除く。
Windows7がサポート終了になりますが、あと数年はWindows7に対してサポートすることになるでしょう。
Windows7で使える最も古い物はIE8ですが、サポートが切れるWindows7のためにIE10以前をサポートするにはCSS開発コスパが悪すぎるので、対象はIE11にすることにします。

参考：[各Windows OSで利用できるIEのバージョンを知る：Tech TIPS - ＠IT](https://www.atmarkit.co.jp/ait/articles/1405/30/news092.html)



#### OS
##### Windows
こちらはユーザー数ではなく、MicrosoftがサポートしているOSか否かで判断します。
Windows7のサポートが終了になり、Windows 8.1から游ゴシックが搭載されるのですが、莫大なユーザー数を抱えるWindows7を切るわけにはいかないので、1,2年は対象としなければならないでしょう。
なのでWindows7以上を対象とします。


#### mac
まず私のQiitaの記事のとある1ヶ月のmacユーザーです。（Windowsと比べて異常なmac率です）
![ga.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133977/01ba9dbf-c015-08b7-08af-7b3aa1478f9a.png)

`10.11`のOSになるとかなり閲覧者が減ります。
`10.12`このラインを取りたいと思います。
これは『10.11 El Capitan』が**OS X**、『10.12 Sierra』が**macOS**となる分岐点でもあります。
macOSになると**Hiragino Sans**というフォントが登場することになります。
同時に**San Francisco**も登場しています。
これでmacで対象とするOSは全て`Hiragino Sans`が使えることになります。


#### Linux
Linuxはコマンドラインからしか触らないのでよく知らないのですが、Ubuntu 18.04からNoto CJK（`Noto Sans CJK JP`）が標準らしいです。
`sans-serif`これを記載するだけで`Noto Sans`が適用されるようです。
ユーザー数がほとんどいないので、OSバージョンではなく`Noto Sans`を採用することにします。

参考: [Ubuntu 18.04 LTSの日本語フォントを変更する！【詳細解説】 | LFI](https://linuxfan.info/ubuntu-18-04-change-ja-font)


#### iOS（iPadOS）
ユーザー数が多く、日本語フォントの種類が少ないためすべて対応します。



#### Android
Noto Sans CJK JPを搭載の機種を対象とします。



### `html`と`body`はどちらに記述するべきか？
どちらでも問題ないようです。
`font-size`などなど`body`に書くと思うので、見やすくするために`body`に統一して書きたいですね。

[CSS - Bootstrapはなぜhtmlとbody両方にfont-familyを記述しているのか？｜teratail](https://teratail.com/questions/224429)



### どんなときにクォーテーションで囲うのか？
マルチバイトまたは半角スペースが含まれるときにクォーテーションで囲います。
囲う必要がない場合は囲わないほうが数バイトですが、容量の削減が出来ます。
またIEは必要ない場合に囲むと、適用されないものもあります。

```scss
// 囲う
body {
  font-family: "游ゴシック", "Hiragino Sans", "🇯🇵";
}

// 囲う必要がない（囲っても動く）
body {
  font-family: -apple-system, HiraKakuProN-W3, sans-serif;
}
```


### `'`（シングルクォーテーション）と` "`（ダブルクォーテーション）どちらを使えばいいのか？
答えはどっちでも良いです。
どちらを使っても同じです。、コーディング規約があるならそちらに従いましょう。
なければどちらか好みの方に決めてしまいましょう。

```scss
// これは気持ち悪い
body {
  font-family: "Sample Win", 'Sample Mac', sans-serif;
}
```
『何か理由があって分けてるのか？』と誤解を招かれるかもしれないので統一しましょう。


### 絵文字について😘
絵文字について考えたことありますか？
私は全く気にしたことがなかったのですが、どうやらちゃんと指定しないと、IEでモノクロの絵文字が表示されるようです。
データベースは`mb4`で対応しているのに`font-family`は対応しないなんてありえない！
ということで絵文字用のフォントも`font-family`に記載していきます。

参考：[絵文字😇を含むテキストを表示する @font-face 設定（Unicode 10.0対応版） | ダーシマ・ヱンヂニヤリング](https://necomesi.jp/blog/tsmd/posts/154)



### 日本語表記とアルファベット表記を併用する必要があるのか？
ないです！
昔々、日本語表記をしないと反映されないブラウザがあったそうな。
safariでは日本語表記を認識しなかったそうですが、現在は認識されているようです。
いつから認識するようになったかは不明。
また、日本語表記とアルファベット表記で違うものを読み込んでいる特殊なフォントもあります。
なので全てアルファベット表記で揃えましょう。



### 日本語とアルファベットでfontを変える必要があるのか？
```css
body {
  font-family: Arial, Meiryo;
}
```
などメイリオにもアルファベットが内包されいてるのになぜArialを記載するのでしょうか？
これはMeiryoのアルファベットがArialに比べてキレイではないから、という理由でこのような書き方をされてきました。
日本語はアルファベットに比べて文字がでかい。それに合わせてアルファベットの文字が作成されているので、総じて日本語フォントのアルファベットは純粋なアルファベットフォントと比べ、見た目で劣ります。
なので基本的にはこのような書き方をすることが必要です。
しかし、後述しますが例外フォントが存在するのです。



### カーニングについて
カーニング（`font-feature-settings`）ですが、できるフォントとできないフォントが存在します。
カーニングできるフォントのみで`font-family`を構成することは出来ないので、考えないことにします。
`font-feature-settings`を設定する場合、カーニング出来たらラッキー！ぐらいに考えてください。



## 候補に上がるフォント
気になりごとが調べ終わりました。
まずは一般的に利用されてきたフォント、新たに候補に加えるに値するフォントを列挙します。
いずれかの環境に入っていて、無償でダウンロードできるフォントを△とします。

 | Windows | macOS | Linux | iOS | Android
--- |:---:|:---:|:---:|:---:|:---:|
**アルファベット** |  |  |  |  | 
Segoe UI | ○ |  |  |  | 
Verdana | ○ | ○ |  | ○ | 
Arial | ○ | ○ |  | ○ | 
-apple-system |  | ○ |  |  | 
BlinkMacSystemFont |  | ○ |  |  | 
Helvetica Neue |  | ○ |  | ○ | 
Helvetica |  | ○ |  | ○ | 
Roboto |  |  |  | | ○　|
**日本語** |  |  |  |  | 
Yu Gothic | ○ |  |  |  | 
YuGothic |  | ○ |  |  | 
Meiryo | ○ |  |  |  | 
BIZ UDPGothic | ○ | △ |  |  | 
UD Digi Kyokasho | ○ |  |  |  | 
MS PGothic | ○ |  |  |  | 
Hiragino Sans |  | ○ |  | ○ | 
Hiragino Kaku Gothic ProN |  | ○ |  | ○ | 
Osaka |  | ○ |  |  | 
Noto Sans CJK JP | △ | △ | ○ |  | 
Droid Sans |  |  |  |  | ○
**絵文字** |  |  |  |  | 
Segoe UI Emoji | ○ |  |  |  | 
Segoe UI Symbol | ○ |  |  |  | 
Apple Color Emoji |  | ○ |  |  | 
Noto Sans Emoji |  |  | ○ |  |
**共通** |  |  |  |  | 
sans-serif | ○ | ○ | ○ | ○ | ○

こんな漢字でしょうか？
いくつか見慣れないものがあるかもしれませんが、後述します。



## うんちく💩
ちょっと余談。



### 游ゴシックのフォント名
Windowとmacで微妙に違う。
※今回これが後でこれが重要なポイントになる。

Windowは`Yu Gothic`で日本語表記は`游ゴシック`。
macは`YuGothic`で日本語表記は`游ゴシック体`。



### -apple-systemとBlinkMacSystemFont
mac用のフォントだが、フォント名とは全然違う`San Francisco`というフォントが適用される。
参考：[San Francisco フォントを探る - Qiita](https://qiita.com/usagimaru/items/da88c0a8793f23633c28)

`BlinkMacSystemFont`はレンダリングエンジンBlink搭載ブラウザ(Chrome, Opera)で適用される。
`-apple-system`その他ブラウザで適用される。
GoogleとAppleの（ブラウザ）仲の悪さからこうなったのだろうか？



### Hiragino Kaku Gothic ProNの『N』ってなによ？
![hiragino.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133977/7ac046ea-7635-75c0-9a60-d47149a0bcff.png)

`Hiragino Kaku Gothic ProN`と`Hiragino Kaku Gothic Pro`を比較して『**N**』はいくつかの漢字が旧字体になります。
`Hiragino Sans`は`ProN`寄りです。

参考: [ProとProN、StdとStdNの違い - フォント専門サイト fontnavi](https://fontnavi.jp/zakkuri/205-N_fonts.aspx)



### Window10の新フォント
Window10はアップデートでいくつかのモリサワフォントが追加されています

− **UDデジタル教科書体（UD Digi Kyokasho NK-R）**
その名の通り教科書向けに作成されたフォントです。
UDとはユニバーサルデザインのことで、見た目よりも読みやすさを優先したフォントにつけられることが多いです。

− **BIZ UDゴシック（BIZ UDPGothic, BIZ UDGothic）**

Microsoft Officeに特化したフォントだそうです。
Officeに特化というだけあってWindows10以外でも利用できるようにMORISAWA BIZ+に登録するとダウンロードできるようになっています。BIZだけど個人でもOK！
ゴシック体だけではなくBIZ UD明朝という明朝体も同時に採用されています。

見た目は游ゴシックよりもメイリオより。
Windowsの日本語フォントの中ではダントツに可読性が高いです。
ただし仮想ボディーギリギリまで利用しているので、他のフォントと比較すると`line-height`が小さく見えます。

[フォントラインナップ | MORISAWA BIZ+ | フォント製品 | 製品／ソリューション | 株式会社モリサワ](https://www.morisawa.co.jp/products/fonts/bizplus/lineup/)
ダウンロード：[「MORISAWA BIZ+ 無償版」（旧：MORISAWA BIZ+「BIZ UD ゴシック／明朝 スタンダード版」）書体改訂のご案内[2018.10.24] &ndash; BIZ+](https://support.bizplus.typesquare.com/hc/ja/articles/360018571331--MORISAWA-BIZ-%E7%84%A1%E5%84%9F%E7%89%88-%E6%97%A7-MORISAWA-BIZ-BIZ-UD-%E3%82%B4%E3%82%B7%E3%83%83%E3%82%AF-%E6%98%8E%E6%9C%9D-%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%80%E3%83%BC%E3%83%89%E7%89%88-%E6%9B%B8%E4%BD%93%E6%94%B9%E8%A8%82%E3%81%AE%E3%81%94%E6%A1%88%E5%86%85-2018-10-24-)

## 問題点のあるフォント

#### Yu Gothic
・IEで下部に余白ができるバグがある。
游ゴシックが一般的に使われているので今回は無視することにします。
気になるのであれば、IE11をハックなどでメイリオにすると良いです。
・Chromeで`font-weight: 400;`のときかすれて見れる不具合がある。

#### Segoe UI
> U+2546のグリフが、U+2545と同じになっているバグがある。
[Segoe - Wikipedia](https://ja.wikipedia.org/wiki/Segoe)

`U+2546`を利用することは無いと思うので見なかったことにしましょう。
あなたの環境で正しく表示されているか分かりませんがこんな文字です。 → `╅`

#### -apple-system, BlinkMacSystemFont, Hiragino Sans
ウエイトの種類が多いので、ウエイトの少ない日本語フォントと組み合わせたとき、日本語とアルファベットでウエイトに差が出てしまう。
`Hiragino Sans`と組み合わせることで回避出来ます。

#### Hiragino Kaku Gothic ProN
macOS Catalinaで`Hiragino Kaku Gothic ProN`が適用されない。

よく調べていないので下記サイトを御覧ください。
[Mac Catalina WEBでのヒラギノフォント表示問題について考えたメモ - かもメモ](https://chaika.hatenablog.com/entry/2019/10/29/083000)

#### BIZ UDPGothic
バグでは無いと思うが、英数字がやたらとデカイ。
アルファベットフォントが適用されていれば上記は関係なくなる。


## `font-family`を作る
ようやく`font-family`を書きます。

### Original Yu Gothic
まず、Google Chromeの游ゴシックが細い問題に対処します。
詳細は[font-familyにChromeでも読みやすい游ゴシックを指定する方法 - Qiita](https://qiita.com/RinoTsuka/items/1e7b3ca1325e704bbc41)

```scss
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

body {
  font-family: "Original Yu Gothic";
}
```

（以降`@font-face`が行を占領するので省略します）


### すべて並べる
アルファベット、日本語、共通、絵文字の順で、更にいい感じのフォント順に並べていきます。

```scss
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Helvetica,
    "Segoe UI",
    Verdana,
    Arial,
    Roboto,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    YuGothic,
    Osaka,
    "Noto Sans CJK JP",
    "BIZ UDPGothic",
    "UD Digi Kyokasho",
    "Original Yu Gothic",
    "Yu Gothic",
    Meiryo,
    "MS PGothic",
    "Droid Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Sans Emoji",
  ;
}
```

こんな感じでしょうか。
ここから上から順に見ていきます。
問題がある場合を記載します。



### Helvetica Neue, Helvetica
対象環境を決めています。macOSでは全て-apple-systemが搭載されているのでHelvetica Neue, Helveticaは不要なので削除します。

```scss
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Verdana,
    Arial,
    Roboto,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    YuGothic,
    Osaka,
    "Noto Sans CJK JP",
    "BIZ UDPGothic",
    "UD Digi Kyokasho",
    "Original Yu Gothic",
    "Yu Gothic",
    Meiryo,
    "MS PGothic",
    "Droid Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Sans Emoji",
  ;
}
```



### Verdana, Arial
対象のWindowsにはSegoe UIが搭載されているので不要です。
ArialはiOSでも採用されていますが、iOS11以前の環境でも-apple-systemが利用できる（San Franciscoではない）ためこちらも不要です。

```scss
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    YuGothic,
    Osaka,
    "Noto Sans CJK JP",
    "BIZ UDPGothic",
    "UD Digi Kyokasho",
    "Original Yu Gothic",
    "Yu Gothic",
    Meiryo,
    "MS PGothic",
    "Droid Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Sans Emoji",
  ;
}
```

これでアルファベットが-apple-system, BlinkMacSystemFont, Segoe UI, Robotoの4つに確定しました。



### Hiragino Kaku Gothic ProN
古いiOSで必要ですがmacには不要です。
iOSではHiragino Kaku Gothic ProNが無くなればsans-serifが適用され結果的にHiragino Kaku Gothic ProNが適用されます。
なので削除します。

```scss
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    YuGothic,
    Osaka,
    "Noto Sans CJK JP",
    "BIZ UDPGothic",
    "UD Digi Kyokasho",
    "Original Yu Gothic",
    "Yu Gothic",
    Meiryo,
    "MS PGothic",
    "Droid Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Sans Emoji",
  ;
}
```



### YuGothic
mac用の游ゴシック。
Hiragino Sansがあるので不要です。

```scss
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    Osaka,
    "Noto Sans CJK JP",
    "BIZ UDPGothic",
    "UD Digi Kyokasho",
    "Original Yu Gothic",
    "Yu Gothic",
    Meiryo,
    "MS PGothic",
    "Droid Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Sans Emoji",
  ;
}
```


### Osaka
もうこの時代に記載する必要は無いですね。

```scss
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Noto Sans CJK JP",
    "BIZ UDPGothic",
    "UD Digi Kyokasho",
    "Original Yu Gothic",
    "Yu Gothic",
    Meiryo,
    "MS PGothic",
    "Droid Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Sans Emoji",
  ;
}
```



### BIZ UDPGothic

Windowsの新しいフォントの1つですね。
個人的にすごく読みやすいのですが、いかんせん文字がデカイ。
行間を`BIZ UDPGothic`に合わせると他のフォントの行間が想定より大きくなり、
他のフォントに合わせると`BIZ UDPGothic`がギチギチになってしまう。
デザインの難易度が上がってしまうので、残念ながら外します。

```scss
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Noto Sans CJK JP",
    "UD Digi Kyokasho",
    "Original Yu Gothic",
    "Yu Gothic",
    Meiryo,
    "MS PGothic",
    "Droid Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Sans Emoji",
  ;
}
```


### UD Digi Kyokasho
Windowsの新しいフォントのもう1つ。
『教科書』をうたうだけあり、ハネや強弱などしっかりしていて読み物には良さそうですが、小さい文字では潰れがちで向いてない感じがしました。
フォントとしては好きですがWebに向いていないのでこれは削除します。
あくまで一般的で無いだけで、電子書籍等のサイトでは採用してみるのも面白いかもしれません。

[UDデジタル教科書体提供開始 | 株式会社モリサワ](https://www.morisawa.co.jp/topic/upg201802/)


```scss
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Noto Sans CJK JP",
    "Original Yu Gothic",
    "Yu Gothic",
    Meiryo,
    "MS PGothic",
    "Droid Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Sans Emoji",
  ;
}
```



### Yu Gothic
最初に`Original Yu Gothic`を定義しているので不要です。
有ってもいいです。

以前ブラウザに翻弄されて、怖い経験があるのでフォールバックとして残します。
悪戦苦闘のあと → [2020年まで使えるfont-familyおすすめゴシック体 - Qiita](https://qiita.com/RinoTsuka/items/4181efd43d072e246519#comments)


```scss
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Noto Sans CJK JP",
    "Original Yu Gothic",
    "Yu Gothic",
    Meiryo,
    "MS PGothic",
    "Droid Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Sans Emoji",
  ;
}
```



### Meiryo
長年親しんだフォントですが、もはや不要。
対象のWindowsでは sans-serif = Meiryo です。


```scss
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Noto Sans CJK JP",
    "Original Yu Gothic",
    "Yu Gothic",
    "MS PGothic",
    "Droid Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Sans Emoji",
  ;
}
```



### MS PGothic
もはや言うこともないぐらい不要。
今のデフォルトはメイリオなので適用されてしまったら劣化します。

```scss
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Noto Sans CJK JP",
    "Original Yu Gothic",
    "Yu Gothic",
    "Droid Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Sans Emoji",
  ;
}
```


### Droid Sans
Droid Sans = sans-serifなので、こいつを消せば終わりです。

```scss
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Noto Sans CJK JP",
    "Original Yu Gothic",
    "Yu Gothic",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Sans Emoji",
  ;
}
```



### 完成
これで完成です。
省略していた`@font-face`を表示して、最後に整形してあげます。

```scss
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Original Yu Gothic", "Yu Gothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
}
```

この`font-family`のメリットはmacで`font-weight`が100〜900まですべて使えるという事です。
なのでこれからは`font-weight`を`normal, bold`で記述していた人は数値で入力する癖をつけないといけませんね。



## 教えて
[Bootstrap](https://github.com/twbs/bootstrap)を参考にしたのですが、`Segoe UI Emoji`, `Segoe UI Symbol`と2種類記載する理由が分かりませでした。
ご存じの方いましたらご教授ください。


## コメントについて
・Chromeの`@font-face`のバグは修正されているのを確認しています。
・Noto Sans CJK JPを利用していますがWebフォントは利用していないのでリクエストは発生していません。



## おまけ
游ゴシックギライがそこそこいるらしいので、游ゴシックなしバージョンを用意しました。
メイリオとSegoe UIの相性はどうなのでしょう？Arialなんかに変えても良いかも。

```scss
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
}
```



## 最後に
[2020年まで使えるfont-familyおすすめゴシック体 - Qiita](https://qiita.com/RinoTsuka/items/4181efd43d072e246519)では多数の方にご迷惑をおかけしました。（私のせいでは無いけれど）
慣れ親しんだフォントが記載されなくなって、なんだか不思議な感じです。

斜め読みした方も、全部読んでくれた方もお疲れさまでした。
1ヶ月以上前から書き始めて、何度も何度も修正したので変なところがあるかもしれません。
見つけたらご指摘ください。

絵文字とスマホはもうちょっと改良の余地があるかもしれない。