WebKit、iOS 9とOS X 10.11でWebコンテンツにAppleの新しいシステムフォント「San Francisco」の適切なWeightを使用するCSSプロパティ設定を公開。

News

WebKitがiOS 9とOS X 10.11でWebコンテンツにAppleの新しいシステムフォント「San Francisco」を適用するCSSプロパティ設定方法を公開しています。詳細は以下から。

2015.07.31

記事内に広告が含まれています。

　WebKitが公式ブログにて「Webコンテンツでシステムフォントを使用する方法」という面白い記事を公開しています。

WebKit@webkit

Myles Maxfield details the -apple-system CSS font-family keyword. — Using the System Font in Web Content — https://t.co/wh1sVwujYX

2015/07/28 01:47:46

　AppleのWebエンジニアMyles Maxfieldさんが投稿したこの記事は「Webコンテンツは時に根幹となるプラットフォームでレンダリングされた時に全体的に合うようにデザインされている場合がります。このプラットフォームのシステムフォントをiOS とOS Xで使用する1つの方法はCSSのfont-familyプロパティの値に”-apple-system”を使用する事です。この方法を使用することでiOS 9とOS X 10.11ではAppleの新しいシステムフォント”San Francisco”を使えるようになります。”-apple-system”は”font-weight” CSSプロパティに作用し、最新のiOS／OS Xで最適なWeightを選択してくれます」というもので、

CSS-font-family-apple-system-on-El-Capitan2

Web content is sometimes designed to fit in with the overall aesthetic of the underlying platform which it is being rendered on. One of the ways to achieve this is by using the platform’s system font, which is possible on iOS and OS X by using the “-apple-system” CSS value for the “font-family” CSS property. On iOS 9 and OS X 10.11, doing this allows you to use Apple’s new system font, San Francisco. Using “-apple-system” also correctly interacts with the font-weight CSS property to choose the correct font on Apple’s latest operating systems.

[Using the System Font in Web Content – Webkit Blog]

　”-apple-system”をサポートしていないプラットフォームでは”font-family”のフォールバックリストが適用されるそうです。このオプションを”system”にするかは現在W3Cで議論中のため、現在WebKitでは”-apple”の接頭語を付けて使用することが出来るそうで、以下のfontプロパティの値がサポートされているとのことです。

font: -apple-system-body
font: -apple-system-headline
font: -apple-system-subheadline
font: -apple-system-caption1
font: -apple-system-caption2
font: -apple-system-footnote
font: -apple-system-short-body
font: -apple-system-short-headline
font: -apple-system-short-subheadline
font: -apple-system-short-caption1
font: -apple-system-short-footnote
font: -apple-system-tall-body