San Francisco フォントをCSSで指定するには

iOS9からシステムフォントとして使用されている「San Francisco（以下SFと記述）」。個人的な好みもあると思いますが、私は好きです。

で、このブログでもCSSを編集し、SFで表示できる文字は表示したいと思ったのですが、単純な考えでは通りませんでした。しばらく調べていてやっと見つかりましたので、ご紹介します。

もちろん現在はSFを使用しています。iOS9で閲覧されている方は、今まさにご覧いただいています。まあ正しくは、単にSFではなく「SF Compact」の「text」なのですが、これがどういうことかは読み進めていけばお分かりいただけるかと。

一筋縄ではいかない

フォント名がSan Franciscoなので、まず単純に以下のように記述しました。なお、メイリオとかヒラギノ角ゴなどの日本語フォント向けの設定も当然していますが、この記事には無関係なので省略。

で、できませんでした。なんでや。

San Franciscoの成り立ちが原因だった

調べたところ、SFは複数の書体を併せ持ち、環境やサイズに合わせて変化するフォントであるようです。この図を見てください。

Apple explains the extended San Francisco Type Family　より引用

同じSFではありますが、MacのOS X向けには「SF」、iOS9向けには「SF Compact」というように、デバイス別に2つの書体があります。さらにフォントの大きさによってまた2つの書体に分かれます。

San Francisco フォントの優れたところは、Display / Text の２つの Optical Sizes を、システムが自動的に使い分ける点です。具体的には、20pt のサイズを境にして、Display / Text が自動的に切り替わります。

Apple の新フォント San Francisco の秘密　より引用

さらに文字の太さ（ウェイト）の違いもあり、それらを含めてSFは合計30もの書体を持つフォントなのです。

つまるところ、複数の書体を持つという特別な仕様に対応した記述をするためには、他のフォントと同様の設定では効かないということなんですね。

一筋縄ではいかないから知ることができたSFのすごさ。ますます好きになってしまいます。

文字種が多すぎる日本語フォントには、書体を30種類も用意するなどとてもマネできない芸当ですが、よく使う英数字を変えるだけでも雰囲気は変わってきますよね。是非とも活用したいところです。

どう指定するのか

勧めるだけじゃなくて指定する方法教えろよ。はいそうですね、すみません。

font-familyの指定でできます。

Appleのシステムフォントだから -apple-system と単純明快ですね。これを入力しておくだけで、OS XでもiOS9でも、そしてサイズやウェイトによって、適切な表示に直してくれることになります。

あーあと、iOS8以前であればおそらくHelveticaで表示されるのではないでしょうか。これ1つでApple製OSにはすべて対応できますね。ただ、もちろん日本語も使うでしょうからヒラギノ系もあとに続けて指定しましょう。

なお、たくさんある書体の中から強制的に選択することも可能です。以下のように指定すればよいようです。

※xxxの位置に入力する文字列によって変化します。以下から選んでください。なお、この画像はiOS9デバイスにて実際にプレビューした結果ですので、ご参考になさってください。

スポンサーリンク