Safari 13.1 以降では San Francisco の Mono や Rounded な variant とかを CSS で指定できるようになっている

WWDC20 の "The details of UI typography" という動画をなんとなく見ていたところ偶然気がついた。

developer.apple.com

Transcript 的にはこの辺:

Now the -apple prefixed version has a standard name: system-ui. And earlier this year, we're bringing a new set of CSS font family names, like ui-rounded, ui-serif and ui-monospace to Apple platforms.

そもそも: San Francisco 以降 Apple のシステムフォント群はじわじわ増殖している

San Francisco フォントが Apple 製品のシステムフォントになってから、そのファミリーがしれっと拡大していることにお気づきだろうか。

developer.apple.com

で、これらのフォントは iOSmacOS なんかのアプリを作るときには使えるようになっていたわけだけど、ウェブページから使う術はなかった。なぜなら San Francisco フォントを font-family: -apple-system; で呼び出していたのに相当する設定がそもそも用意されていなかった (多分) んだけど、それが今回めでたく爆誕したぜ、という話。

Safari 13.1 のリリースノートにも書かれていたっぽいんだけど完全に見逃していた。

webkit.org

実際にやってみた

こうじゃ!

Safari Version 14.1 (16611.1.21.161.3) (macOS Big Sur 11.3 (20E232) 上) ではこういう感じになる:

f:id:polamjag:20210502203604p:plain:w400

同じ Mac 上の Google Chrome Version 90.0.4430.93 だとこう:

f:id:polamjag:20210502203650p:plain:w400

今はまだ Safari だけ

つまるところ、今はまだ Safari しか対応していない。

ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for font-family (caniuse.com)

system-ui だけは Chrome でも既にサポートされている *1

system-ui value for font-family (caniuse.com)

caniuse.com でトラッキングできるということは標準化しようという動きがあるということで、すでに CSS の Editor's Draft には入っている。

CSS Fonts Module Level 4

議論はこのへんでされていそう:

上でも書いたように、Chrome では結構前から system-ui だけサポートされていて、それ以外は未サポートのようだった。チケットだけ立っている。

Firefox の Bugzilla にもチケットが立ってはいた:

余談

WWDC20 の The details of UI typography という動画の話に戻ると、これまでは表示サイズによって SF Text と SF Display という違うファミリーを出し分けていたのを SF Pro という variable font に統一しました、みたいな話をしていて、これはこれでめちゃくちゃすごいことが起こっているな……という気持ちになる。ウェブとか Apple とか関係なく、フォント好きな人は見ると絶対楽しめると思う。日本語字幕も用意されている。

developer.apple.com

*1:chrome://settings とかで DevTools を開くと font-family に system-ui が入っている