☰

AppleのSan Franciscoフォントをウェブページで使用する方法 質問する

tag-icon • tag-icon css
AppleのSan Franciscoフォントをウェブページで使用する方法 質問する

Apple の San Francisco フォントをサイトで使用したいのですが、次のことを試しました:

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

役に立たなかった。私は答えを試したこの質問しかし、これは@font-faceここでの解決策ではありません。

ベストアンサー1

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

この抽象化の目的は、オペレーティング システムが特定の太さでどの書体を使用するかをより適切に選択できるようにすることです。Apple は、選択可能な「6」と「9」のグリフや非等幅の数字などのフォント機能にも取り組んでいます。Apple はこれらの機能を 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 は W3C と協力して、CSS で汎用の「システム」フォント名を使用することを標準化しようとしているようです。https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

個人使用のために SF フォントの .otf ファイルをダウンロードします。https://developer.apple.com/fonts/

おすすめ記事