『 Helvetica Neue 』だった iOS のシステムフォントが、iOS 9 から Apple が新たに開発した『 San Francisco 』に変更になり、Winodws 8.1 とOS X Mavericks（ 10.9 ）からは、『 游ゴシック体 』と『 游明朝体 』が標準搭載され、Windows 10 のシステムフォントには『 Yu Gothic UI 』が採用されている。

最新のシステムフォントに対応するために、『 San Francisco 』や『 游ゴシック体 』の勉強がてら『 font−family 』を記述修正。

以下、Linux は未考慮で、個人的な好みが入った『 font−family 』の記述の覚え書き。

font-familyの記述方法

指定したい文字（フォント）の種類は、CSS に『 font−family 』というプロパティで指定する。

（例）下記のように記述してフォントを指定。

Windows 、Mac 、iPhone など、OS によって標準搭載されているフォントが異なるので（Mac にしか入っていないフォントを指定しても、Windows のパソコンでは、そのフォントをウェブページで表示させることが出来ない）、それぞれの OS に対応するために複数のフォント名を記述する。

フォントをfont-familyで指定するためのルール

  • 記述されている順番に優先的に表示され、デバイスに無ければ次のフォントといった具合に読み込まれるので、表示させたいフォントから順番に記述する。
  • 日本語フォントを先に記述すると日本語フォントに含まれている英字フォントが使用されてしまうので、欧文フォントを使用したい場合は先に記述する。
  • 全角文字やスペースを含むフォント名の場合にはダブルクォーテーション「 ” フォント名 ” 」かシングルクォーテーション「 ‘ フォント名 ‘ 」で囲んで記述する。
  • フォントに英語名と日本語名がある場合には日本語名から先に記述する。
  • 該当フォントがない環境でもゴシックと明朝の指定はできるようにするために総称ファミリー（ sans-serif ・ serif ）を最後に記述する。

総称ファミリーを最後に指定

総称ファミリーは、OS に標準でインストールされているフォントのこと。

サイトが表示される際に、ブラウザが、どのフォントを表示していいかわからなくなる状態を防ぐ保険のようなものなので、Windows でも Mac でも確実に表示されるように最後に総称ファミリーを記述しておく。

総称ファミリー名 字体
sans-serif ゴシック体
serif 明朝体
cursive 筆記体
fantasy 装飾体
monospace 等幅体

San Francisco とは

San Francisco

『 San Francisco 』は、iOS 9 、Mac OS X El Capitan（ 10.11 ） からシステムフォントとして採用されている Apple がディスプレイ表示用にデザインしたオリジナルフォント（書体）。

Helvetica から San Francisco へ

Apple は、初代 iPhone から、iOS のシステムフォントとして『 Helvetica 』を採用してきたが、『 Helvetica 』は小さいサイズに弱い書体だったこともあり、Apple Watch で『 San Francisco 』を採用し、今では、iPhone や iPad 、Mac でも『 San Francisco 』をシステムフォントとして採用している。

Apple が、印刷用の書体だった『 Helvetica 』ではなく、ディスプレイ表示用にデザインした『 San Francisco 』を採用したということは、文字デザインも紙から電子デバイスに主眼を置き始めたのかもしれない。

システムフォントとは、パソコンの OS で標準的に使用されるフォントのこと。

San Francisco の特徴

San Franciscoの特徴

『 San Francisco 』はフォント（書体）が 1 つではなく、Apple Watch は、『 SF Compact 』、iPhone は、『 SF 』というフォントが使われている。

『 SF Compact 』のほうが縦線の丸みが少なく、文字間が広い。

San Francisco の優れた点

San Franciscoの優れた点

  • フォントの種類を自動的に使い分ける

    • Display / Text の２つの Optical Sizes を 19px 以下だと Text　、20px 以上だと Display にシステムが自動的に使い分ける。

  • 文字間の余白が広い

    • 小さいほうの Text では、文字間のスペースを多くとってあり、更に隙間部分を広くして、潰れにくくしてある。

  • 和文のフォントサイズの縮小

    • アルファベットと日本語が混在すると、日本語の方が大きく見えて不格好になるので、和文の場合は指定フォントより小さくなる。

  • コロンの位置を自動調整

    • コロンを数字で挟んだ場合、システムが自動的にコロンの位置を垂直位置に調整する。

『 San Francisco 』はデバイス上で文章を読みやすくするように様々な工夫がされている、とても優れたフォントである。

個人的には、『 Helvetica 』より太字なところがいいです。

San Franciscoを指定する記述方法

font-family プロパティに、「 San Francisco 」と記述しても表示されないので、「 -apple-system 」と「 BlinkMacSystemFont 」を記述する。

「 -apple-system 」は Safariや Firefox 、iOS などで（ OS X El Capitan 、iOS 9 以降であれば）適用され、「 BlinkMacSystemFont 」は Blink 系のブラウザ ( Chrome と Opera ) で適用される。

（例）「 San Francisco 」の記述方法。

「 -apple-system 」については【 San Francisco フォントをCSSで指定するには | ナギサものおき 】の解説を参考にさせていただきました。

ありがとうございました。

游ゴシック体・游明朝体とは

游ゴシック

『 游ゴシック体・游明朝体 』は、Windows 8.1 、OS X Mavericks（ 10.9 ）以降、Windows と Mac の両方に標準搭載された日本語フォント。

標準搭載された游ゴシック・游明朝

これまでは Windows なら『 メイリオ 』、Mac なら『 ヒラギノ 』とそれぞれ違うフォントを指定することが定番だったけど、『 游ゴシック体・游明朝体 』が標準搭載されたことによってどちらの環境でも同じフォントを指定することができるようになった。

ただし、『 游ゴシック・游明朝 』が搭載されているのは Windows は 8.1 以降、OS X は Mavericks（ 10.9 ） 以降なので、それより古い環境ではこれまで通り、別のフォントを指定しなければならない。

游ゴシック・游明朝を使用するメリット

各種デバイスでサイトを閲覧した際に、Windows、Mac 共に、どちらの OS でも同じフォントで表示することができるのでデザインに統一性ができ、さらに、OS の異なるデバイスごとの確認が必要ない。

游ゴシック・游明朝を指定する記述方法

Windows と Mac では指定するフォント名が違うので、それぞれを指定する。

  • Windows で『 游ゴシック 』は「 Yu Gothic 」、『 游明朝 』は「 Yu Mincho 」。
  • Mac で『 游ゴシック 』は「 YuGothic 」、『 游明朝 』は「 YuMincho 」。

Windows と Mac では標準搭載されているフォントのウェイトの種類が違うので、ウェイトの指定をしないで使用した場合、Windows では「 Regular 」が、Mac では「 Medium 」が適用される。

Windows で「 Yu Gothic 」を指定して Mac と同じウェイトで表示させるためには、Windows では Medium で表示するように指定する。

  • Windows に標準搭載されているウェイトは「 Light ・ Regular ・ Medium ・ Bold 」。
  • Mac に標準搭載されているウェイトは「 Medium ・ Bold 」。

（例）『 游ゴシック 』の記述方法。

2017 年 font−family の指定記述

あれこれ思案の末、最終的に下記の指定でアップデート。

『 San Francisco 』は入れたけど、『 メイリオ 』が好きなので、『 游ゴシック 』は、結局、外してしまった。

font−family に記述するフォント詳細

  • -apple-system

    • iOSのシステムフォント「 San Francisco 」が適用される。
    特殊なフォントなので、font-familyに「 San Francisco 」で指定しても適用されないので、「 -apple-system 」で指定。

  • BlinkMacSystemFont

    • -apple-systemと同じ「 San Francisco 」を適用する指定。
    Blink（ WebKit から派生したレンダリングエンジン ）用フォントなので、Blinkを使用しているChromeとOperaに適用される。
    ※Androidは未確認。

  • Helvetica Neue

    • 「 -apple-system 」、「 BlinkMacSystemFont 」が適用されない環境用の英字フォント。

  • Yu Gothic・YuGothic

    • Windows 8.1、OS X 10.9 以降の日本語フォント「 游ゴシック 」を指定。
    「 Yu Gothic 」が Windows 用 、「 YuGothic 」が Mac 用。

  • Hiragino Sans

    • OS X 10.11 以降及び iOS9 の「 游ゴシック 」が適用されない環境用の日本語フォント。

  • Hiragino Kaku Gothic ProN

    • OS X 10.5以降及び iOS の「 游ゴシック 」が適用されない環境用の日本語フォント。

  • Arial

    • Windows vista 以降の「 游ゴシック 」が適用されない環境用の英字フォント。

  • Meiryo

    • Windows vista 以降の「 游ゴシック 」が適用されない環境用の日本語フォント。

  • sans-serif

    • デフォルトの明朝体ではなくゴシック体を表示する。

※「 YuGothic 」を指定するのであれば、「 Hiragino Sans 」は必要無し。

游ゴシックを使う場合の font−family の記述

今のところ予定は無いけど、気が変わって『 游ゴシック 』を使うなら下記。

トレンドなら『 メイリオ 』より『 游ゴシック 』なんだろうけど、OS がアップグレードされてシステムフォントが変更になるまでは、好きな『 メイリオ 』を使う予定。