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

記事内に広告が含まれています。
スポンサーリンク

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


WebKit-Hero


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


 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

 AppleはOS X 10.11, iOS 9, watchOSで新しいシステムフォント”San Francisco”の導入を決定しており、4つあるSan Franciscoファミリーには合計で30種類のWeightが存在するため、このCSSプロパティ値が役立ちそうです。


27

関連リンク:

コメント

  1. Apple7743 より:

    Webアプリケーション作る時にこういうプロパティがあると便利だな
    今更かよとも思うけど、存在しないよりははるかに良い

タイトルとURLをコピーしました