Apple System Font
iOS9 以降だと新システムフォント San Francisco を指定するために -apple-system という font-family が指定できる。
- -apple-system … 新システムフォント San Francisco の表示確認用テキスト
- -apple-system, BlinkMacSystemFont … 新システムフォント San Francisco の表示確認用テキスト
- -apple-system-body … 新システムフォント San Francisco の表示確認用テキスト
- -apple-system-headline … 新システムフォント San Francisco の表示確認用テキスト
- -apple-system-subheadline … 新システムフォント San Francisco の表示確認用テキスト
- -apple-system-caption1 … 新システムフォント San Francisco の表示確認用テキスト
- -apple-system-caption2 … 新システムフォント San Francisco の表示確認用テキスト
- -apple-system-short-body … 新システムフォント San Francisco の表示確認用テキスト
- -apple-system-short-headline … 新システムフォント San Francisco の表示確認用テキスト
- -apple-system-short-subheadline … 新システムフォント San Francisco の表示確認用テキスト
- -apple-system-short-caption1 … 新システムフォント San Francisco の表示確認用テキスト
- -apple-system-tall-body … 新システムフォント San Francisco の表示確認用テキスト
- system-ui … Chrome 用のシステムフォント指定の表示確認用テキスト
- Chrome だと
font-family: BlinkMacSystemFont; を指定しないといけない。
- 一部記号が正しく表示されないのを直す
font-family: ".SFNSDisplay-Regular"; 指定は2016年3月頃に不要になった様子。
- システムフォント指定の
-apple-system は font-family に指定すれば良いが、-apple-system-xxx 系のダイナミックフォントは font プロパティに設定して太さなどを変えさせてやらないと反映されない (参考)。
- Chrome だと
font-family: system-ui; という指定も効く。