San Franciscoが来た

macOSとiOSのシステムフォントがSan Franciscoになってから早くも2年が過ぎた。このフォントは内部的にTextとDisplayの2つをフォントサイズによって切り替えるとかやっている関係もあり、アプリケーションに対してフォント名が公開されていない。当然CSSでfont-family: "San Francisco", sans-serif;とかやっても指定できないので、ぐぐってfont-family: -apple-system, BlinkMacSystemFont, sans-serif;とかいうのを発見してコピペすれば、無事目的が達成されて万歳である。

-apple-systemの実際

'-apple-system'は、Appleが自らのブラウザSafari(エンジンとしてはWebKit)でSan Franciscoの特性を適切にサポートするためにCSSのfont-familyプロパティに導入した値である。Safari 9.0のリリースノート1に記述があるほか、WebKitのブログにも言及がある2。また、'-apple-system-body'や'-apple-system-headline'のような特定の使用場面のための指定もできるようになっている(と文献にはある)。

Mozilla Firefoxも-apple-systemをサポートしている(Safariを摸倣して実装したと見られる)。MDNの“font-family”の項の英語版には-apple-systemについて言及がある3。

CSSの'font-family'プロパティの文法は、フォントファミリ名(識別子または文字列)か総称フォントキーワード(識別子)のいずれかを指定することになっている。このうちフォントファミリ名の方は本質的には文字列であり、識別子の指定はスタイルシート記述の利便のために提供されていると見てよい。さて、ここで-apple-systemはその形式がベンダプレフィックスそのものであるので、識別子を意図していると見られ、従って(ベンダ拡張の)総称フォントキーワードであると解するのが適当であると思われる。もっとも、現時点のSafariの実装はこれに反し、文字列形式"-apple-system"でも動作するようである(筆者はApple製デバイスを所有していないので、これは協力者4によるMac上及びiPhone上のSafariにおけるテストの結果による)。これは実装の誤りでないかと思われるが、はっきりしない。

なお、-apple-systemは、当初はSan Franciscoのみに対応付けられていた(結果、San Franciscoのグリフがない和文についてはfont-familyプロパティにおいて後続して指定したフォントファミリによって表示されていた)ようだが、後に、和文はヒラギノ角ゴシックが(システムフォントとしての特性を伴って)表示されるようになったようである(iOSにおけるこの変更はiOS 11と見られる5)。この変更の帰結として、現状、macOS及びiOSのSafariでは-apple-systemより下位の他フォントの指定は効果が及ばなくなっている。

BlinkMacSystemFontの実際

'BlinkMacSystemFont'は、Blink(Google Chrome, Operaで採用)でSan Franciscoサポートのために導入された。ドキュメント等での言及はどうも見当たらない(バグトラッキングシステムのIssueにはいくらか言及がある6)。協力者によるMac上のGoogle Chromeにおけるテストによれば、文字列形式でも動作するようなので、特殊な(「マジック」)フォントファミリ名であると解釈できる。

system-uiへ

前述したように、-apple-systemはベンダプレフィックスそのものという形式をしているわけであるが、実際、これを標準化するものとして、CSS仕様へ総称フォントファミリキーワード'system'を追加する提案がなされた7。のちに'system'ではWindowsで問題を生じてうまくないということで'system-ui'に変更された8ものの、この提案は[CSS-FONTS-4]の草案に取り込まれた。定義は次のようである9：

system-ui

This generic font family is intended to let text render with the default user interface font on the platform on which the UA is running. A cross-platform UA should use different fonts on its different supported platforms. The purpose of 'system-ui' is to allow web content to integrate with the look and feel of a native app. On platforms which have a collection of system user interface fonts (e.g. for different languages), user agents may treat 'system-ui' as a virtual font which encompasses all the platform user interface fonts. However, if this is done, the details of the virtual font must not be visible or detectable.

執筆時点では、主要なブラウザではBlinkエンジンのみがsystem-uiを実装しているようである。ただし、Blinkの実装は誤っていて、識別子ではなく文字列の"system-ui"でも動いてしまう。他に、WebKit(Safari)にも実装の予定がありそうである(が、詳しくはよくわからなかった)。

ところで、system-uiは、上の定義文にもあるように「UAの動作しているプラットフォームのUIフォント」でテキストを表示するよう要請するから、(標準的な)Windows 8.1ではMeiryo UI、Windows 10ではYu Gothic UIが適用されるのが適当ということになる。実際、Blinkの実装はそうなっているようである(筆者のWindows 8.1上のGoogle Chromeでのテストの結果による)。-apple-systemの現状のユースケースには「San Franciscoが使える環境では使いたい」というのが多いようであるから、これを単にsystem-uiに置き換えたのでは望まぬ結果を生産するケースもあると考えられる(特に、Windows 10でのYu Gothic UIはそのレンダリングと相まって評判がすこぶる悪い)。-apple-systemとBlinkMacSystemFontも当分の間サポートされると思われるが、-apple-systemについてはベンダプレフィックスである以上観念的にはsystem-uiと同じものであるから、system-ui実装とともに-apple-systemがsystem-uiの別名とされてもおかしくはなく、そうなった場合にはなかなか地獄を見ることになりそうである。

system-uiの意義を考える

そもそもの-apple-systemが何のために導入されたかを考えると、San Franciscoが何であるかというところから出発することになろう。San Franciscoは、単にシステムフォントを新しいものに置き換えたというのではなく、フォントサイズによる切り替えをしたり、コロンの垂直位置を調整したり、従来のデジタルフォントにない機能性が追加され、デジタル機器に適した文字の表示を実現しようとしている(Appleの開発者ウェブサイトには、San Franciscoのための特設ページが作られている10)。言い換えると、San Franciscoは、従来のタイプフェイスやデジタルフォントフォーマットの枠を超えて、「デジタル機器に美しい文字を表示するためのレンダリングシステムまで含めた一式のフォント提供パッケージ」として登場したと見ることができるのではないだろうか(実に「Appleらしい」ことだ)。そして、San Franciscoを通常の(従来の)仕方で利用できないのはブラウザに限らず全てのアプリケーションで同じである(例えばAdobe Illustratorでは、開発用に別にインストールしない限りSan Franciscoを選択することはできない)のだが、これは、アプリケーションでSan Franciscoを表示する際、OSレベルのAPIとして(通常の文字表示ではなく)UIとして文字を表示するためのAPIを(強制的に)利用させるためのOSの設計であると考えられる。「WebでSan Franciscoを使う」というのも、この考えに立てば、「San Franciscoを使う」のではなく「通常の文字表示と別にUI用に特別に用意された高度なフォントレンダリングシステムを利用する」ことを意味することになる。これならば、Appleが、例えば「CSSだけで使えるマジックフォントファミリ名"San Francisco"」のような(ある種ブラウザのための抜け道的な)方法ではなく、ベンダ拡張総称フォントファミリ-apple-systemという形でSan FranciscoのWeb需要に応えたのも、なんとなく納得できる気がしてくる。

AppleのOS以外でのsystem-uiはどうであろうか。WindowsにはAppleのOSほど大仰なフォントレンダリングシステムはないけれど、システムUIフォントはバージョンアップとともに更新されてきており、かつてのMS UI Gothicと比べれば文字表示の質は向上していると言えるだろう(もっともこれは、ディスプレイが高解像度化しディスプレイ・スケーリングの利用が必然となった時代背景に呼応して必然的なものだった感もある)。このようにシステムUIフォントが変わったとはいえ、現状のWindowsのフォントレンダリングは、ヒンティング情報の整っているMeiryo UI以外のフォントをまともに表示できないあたり、実装がまったくもって不十分なもののように思われる。そのようなわけで、Windowsではsystem-uiにはAppleのようなハイセンスな背景は込められようがなさそうであるというのが結論になる。

それではAppleのOS以外ではsystem-uiは無用の長物なのだろうか。そんなものが標準化されるわけはないので、AppleのOSのような背景がなくてもWebのフォントをシステムUIフォントに揃えることには意義があるということになる。例えば、旧来の慣例からフォントを何も指定しない場合のデフォルトがserif系である環境はいくつか見受けられ、この場合system-uiならばおそらくsans-serif系フォントが適用されるであろう。Webブラウザは今や概して種々の互換性を重視するようになっているが、この例は、後方互換性(過去のブラウザで動くものは同じように動く)の一つとしてデフォルトフォントを安易に変えられないことが背景にあるようにも思われる。似たような例としては、'sans-serif'総称フォントキーワードに対応するフォントがMS PGothicであるようなブラウザも、まだあるようである。あるいは、将来、Webを閲覧する機器の多様化によって、機器によって適切なフォントが大きく異なる事例(具体的な想定として、電子書籍リーダーでWebを閲覧する場合、sans-serif系よりserif系が適しているかもしれない)が生じることを考える。この場合、Webブラウザ相互の互換性を考えて無指定の場合のデフォルトのフォントをsans-serif系にする実装はあり得るだろう。ここで、システムUIフォントはその環境に最も適した文字を表示できるように調整されるだろうから、system-uiならばWeb内容でも機器に適したフォントで表示できることになる。というわけで、システムUIフォントとブラウザのデフォルトフォントとの間でその選定に考慮される事情が異なるということを考えれば、Web内容のフォントをシステムUIフォントに「追従」させるようなCSSのフォント指定は、どうやら意義がありそうである。