[解決済み] Appleの新フォントSan FranciscoをWebページで使用するには

質問

新しいSan Franciscoフォントをサイトで使いたいのですが。試してみました。

font: 'San Francisco', Helvetica, Arial, san-serif;

を使っても無駄です。の答えを試しました。 この質問 を試しましたが @font-face はここでの解決策ではありません。

どのように解決するのですか？

Apple の新しいシステム フォントは、一般には公開されていません。Apple はシステム フォント名の抽象化を開始しました。

この抽象化の動機は、オペレーティング システムが、与えられた重みでどの顔を使うかについて、より良い選択ができるようにするためです。Apple は、選択可能な "6" と "9" のグリフや等幅でない数字などのフォント機能にも取り組んでいます。私の推測では、彼らはこれらの機能を Web にも取り入れたいと考えているようです。

Safari と Firefox は SF を -apple-system Chromeは BlinkMacSystemFont :

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

その他にもバリエーションがあります。

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

これらのデモは以下のフィドルで見ることができます。 http://jsfiddle.net/v94gw9nx/

私は Craig Hockenberry の記事から情報を得ました。この記事にはフォントの使用に関する多くの素晴らしい情報があります。 http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

また、Surfin' Safari ブログでは、抽象化されたシステム フォントの使用に関する素晴らしい情報が掲載されています。 https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

また、Apple は CSS で一般的なフォント名 "system" を使用することを標準化するために W3C と連携しているようです。 https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

SFフォントの.otfファイルをダウンロードしてご利用ください。 https://developer.apple.com/fonts/