このページのもくじ
San Francisco のダウンロード
次のページからダウンロードできます。
↓ ↓ ↓
Fonts – Apple Developer
「SF-Font.dmg」をWクリックすると、インストール画面が表示されます。
これらのフォントをインストールすれば、Illustrator や PhotoShop から San Francisco が使えるようになります。
実際にフォントをインストールするとたくさんの種類があって驚いた。
どんな違いがあるのだろう。
見出し用には Display 、本文用には Text 。
フォルダの中には、太さが違うファミリーがウルトラライト〜ヘビーまで9種類も入っている。Text の方はさらにイタリック体も含まれ全部で12種ものファミリーが揃っている。
使い方としては、20 ポイント以上では Display を使い、それ未満では Text を使うのがよいとされている。
San Francisco と San Francisco Compact の違い
San Francisco Compact では、より小さな画面でより多くの情報を表示するため、 e や o などの丸いアルファベットの側面が直線的に処理されいる。
San FranciscoとSan Francisco CompactのそれぞれにTextとDisplayがある。
＜参考にさせて頂いたサイト＞
Webで「San Francisco」を表示させるには？
CSSでフォントファミリーを指定します。しかも 20 pt を境に自動的に Display から Text に切り替わってくれます。
font-family: -apple-system, BlinkMacSystemFont, sans-serif; ;
記号も含めて正確に出力したい場合は、下の指定も追加。
font-family: ".SFNSDisplay-Regular";
ただし、-apple-system や BlinkMacSystemFont で描画されるヒラギノはシステムフォント用に縮小されたもの（パス名は .Hiragino Kaku Gothic Interface）なので要注意。本文だとかなり読みづらくなりますので、font-family ではちゃんとヒラギノも指定してあげましょう。
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";
●Chromではこちらの指定も有効らしい。
この方法では、OS のシステムフォントがレンダリングされるということですので、でMacではSan Franciscoが表示されますが、Windows では下の画像のように Segoe + Yu Gothic UI が出力されます。
font-family: system-ui;
＜参考にさせて頂いたサイト＞