Mac・iOS のシステムフォントを CSS で使う : 「-apple-system」
font-family に -apple-system と指定すると、Mac と iOS で表示した時に MacOS or iOS のシステムフォントである「San Francisco」が使用できる。
目次
Apple システムフォントの指定方法
システムフォントは以下のように指定することで適用できる。
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
BlinkMacSystemFont は、Chrome など Blink 系のブラウザ向けに Apple のシステムフォントを有効にするための指定。
「San Francisco」フォントはその名称をただ指定しても適用されないので、このような特殊なフォント名を使用することになる。
iOS は和文も変化する
Mac の場合、フォントが適用されるのは英文だけで、和文は変わらないが、iOS の場合は和文もフォントが変化する。しかし、以下のように後続にヒラギノなど和文フォントを指定すると、英文のみ -apple-system フォントで、和文がヒラギノに変化してしまうので注意。
/* これだと iOS で和文に Apple システムフォントが適用されなくなる */
font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, sans-serif;
幸い Apple システムフォントの和文とヒラギノ角ゴはそこまで違いがないので、大雑把に指定するだけなら特に問題にならないだろう。
iOS だけ使えるその他の Apple システムフォント
MacOS だと、この -apple-system しか指定できないのだが、iOS の場合はコレ以外にも特殊な Apple システムフォントが設定できる。
以下に CSS クラスとしてそれぞれ用意したが、これらは font プロパティを利用して指定し、サイズやウェイトまでを一括変更させてやらないと適用されない。font-family に -apple-system-headline と書いても適用されないので注意。
.system-body { font: -apple-system-body; }
.system-headline { font: -apple-system-headline; }
.system-subheadline { font: -apple-system-subheadline; }
.system-caption1 { font: -apple-system-caption1; }
.system-caption2 { font: -apple-system-caption2; }
.system-footnote { font: -apple-system-footnote; }
.system-short-body { font: -apple-system-short-body; }
.system-short-headline { font: -apple-system-short-headline; }
.system-short-subheadline { font: -apple-system-short-subheadline; }
.system-short-caption1 { font: -apple-system-short-caption1; }
.system-short-footnote { font: -apple-system-short-footnote; }
.system-tall-body { font: -apple-system-tall-body; }
実際に動作確認できるページを用意した。iOS 端末や iOS シミュレータで以下のページを見てみてほしい。
これら -apple-system-xxx で指定できるフォントをダイナミックフォントと呼ぶようだ。
font プロパティでダイナミックフォントを適用したあとに、改めて font-size や font-style などを指定することはできる様子。
その他
一部記号が正しく表示されないのを直すために、font-family: ".SFNSDisplay-Regular"; という指定があったようだが、2016年3月頃に不要になった様子。現在は指定しなくても大丈夫であろう。
今回紹介した -apple-system と直接は関係ないが、Chrome に限り font-family: system-ui; という指定で、システムフォントを指定することができる。その端末のシステムフォントを自動的に探して利用するので、「色々な環境でとりあえず見やすそうなフォントを指定したい」時には使えるかも。