Appleプラットフォームフォントスタック

Appleプラットフォームフォントスタック

AppleはmacOS、iOS、iPadOS、watchOS、tvOS全体でSan Franciscoフォントファミリーを提供しています。San Franciscoは2つの光学サイズで提供されます：UI要素用のSF Proとコード用のSF Mono。Webでは「San Francisco」を名前で参照できないため、ベンダープレフィックス付きキーワード-apple-systemを使用します。

宣言

font-family: -apple-system, BlinkMacSystemFont,
  "Helvetica Neue", Helvetica, Arial, sans-serif;

なぜsystem-uiだけではないのか？

Appleデバイスでは、system-uiはすべてのモダンブラウザでSan Franciscoに正しく解決されます。ただし、古いmacOSバージョン（El Capitan以前）や古いSafariバージョンもサポートする必要がある場合、-apple-systemの後にBlinkMacSystemFontを置く方が信頼性が高くなります。

フォールバックとしてのHelvetica Neue

San FranciscoがOS X El Capitan（2015）で導入される前、AppleはシステムフォントとしてHelvetica Neueを使用していました。これを含めることで、古いMacのユーザーでもクリーンなサンセリフ書体が表示されます。

フォントウェイトと光学サイジング

San FranciscoはUltralight（100）からBlack（900）までのウェイトをサポートし、ポイントサイズに基づいて自動的に光学サイジングを適用します。小さいサイズ（約20px以下）では、ブラウザはよりタイトな字間と開いたカウンターを持つSF Pro Textを選択し、大きいサイズではよりタイトなトラッキングのSF Pro Displayに切り替えます。

SF Monoとの組み合わせ

コードブロックには、Apple最適化モノスペーススタックと組み合わせます：

font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;