新しいサンフランシスコのフォントをサイトで使用したい。私はもう試した：

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はW3Cと協力して、CSSで一般的な「システム」フォント名を使用して標準化している。https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

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

承認されたものを含め、現在の回答はどれも、システムフォントとしてインストールされていないシステムではAppleのSan Franciscoフォントを使用しません。問題は「WebページでOS Xシステムフォントを使用するにはどうすればよいか」ではないため、正しい解決策はWebフォントを使用することです。

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

ソース

最終テスト：2018年3月

質問に対処するには

Appleの新しいSan FranciscoフォントをWebページで使用する方法

font-family: -apple-system, system-ui, BlinkMacSystemFont;

または（さらに短い）：

font-family: -apple-system, BlinkMacSystemFont;

十分なはずです。

ただし、複数のプラットフォームでシステムフォントをデフォルトにしたい場合は、以下をお勧めします。

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;

• -apple-system— Safariのサンフランシスコ（Mac OS XおよびiOS）。古いバージョンのMac OS XでのNeue HelveticaおよびLucida Grande。
• system-ui —特定のプラットフォームのデフォルトのUIフォント。
• BlinkMacSystemFont— -apple-systemMac OS X上のChrome の場合、と同等。
• "Segoe UI" — Windows（Vista +）およびWindows Phone。
• Roboto — Android（Ice Cream Sandwich（4.0）+）およびChrome OS。
• Ubuntu — Ubuntuのすべてのバージョン。

このアイデアはgithubの次の号から借りています。

このcss-tricksに関する記事で、他のOSまたはそれらの古いバージョンのフォントを検索できます。

-apple-systemを使用すると、Safariでサンフランシスコを選択できます。BlinkMacSystemFontは、Chromeに対応する代替です。

font-family: -apple-system, BlinkMacSystemFont, sans-serif;

RobotoまたはHelvetica Neueは、サンセリフの前でもフォールバックとして挿入できます。

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a（方法または以前はhttp://furbo.org/2015/07/ 09 / i-left-my-system-fonts-in-san-francisco /詳細を説明する素晴らしい仕事をしてください。

ユーザーがEl Capitan以降を実行している場合、Chromeで動作します

font-family: 'BlinkMacSystemFont';

Appleは今後システムフォントを抽象化しています。この機能は、新しい総称ファミリー名-apple-systemを使用します。だから、以下のようなものがあなたが望むものを得るはずです。

body 
{
  font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}

これは、このかなり古い質問に対する更新です。Webサイトで新しいSF Proフォントを使用したかったのですが、上記の（applesocial.s3.amazonaws.com）以外にフォントCDNが見つかりませんでした。

明らかに、これはAppleによって承認された公式のコンテンツリポジトリではありません。実際、Appleフォントを提供する公式のフォントリポジトリは見つかりませんでした。ウェブデベロッパーがすぐに使用できます。

そして理由があります-https: //developer.apple.com/fonts/から新しいSF Proと他のフォントをダウンロードすることに付随する使用許諾契約を読んだ場合-最初のいくつかの段落に非常に明確に記載されています：

[...] Appleフォントは、AppleのiOS、macOS、またはtvOSオペレーティングシステムで実行されるソフトウェア製品で使用されるユーザーインターフェイスのモックアップを作成する場合にのみ使用できます。上記の権利には、iOS、macOS、またはtvOSでのみ実行されるソフトウェア製品のスクリーンショット、画像、モックアップ、その他の描写、デジタルおよび/または印刷でApple Fontを表示する権利が含まれます。[...]

そして：

本書に明示的に規定されている場合を除き、アップルフォントを使用して、ドキュメント、アートワーク、ウェブサイトコンテンツ、またはその他の作品を作成、開発、表示、またはその他の方法で配布することはできません。

さらに：

明示的に許可されている場合を除いて[...]（i）一度に1人のユーザーのみがApple Fontを使用できます。（ii）Apple Fontを複数のコンピューターで実行または使用できるネットワーク経由で使用可能にすることはできません。同時に。

これ以上質問はありません。Appleは、自社のフォントが自社の製品以外のWeb全体で共有されることを明らかに望まない。

データベースから直接提供されるApple System Fontは使用できません。ライセンス違反ですが、High Sierra以上のMacシステムで使用できます

body 
{
  font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}

または、これを使用できます。

font-family: 'BlinkMacSystemFont';

2015年に最終テスト

他のソリューションが機能しない場合、最後の選択肢としてこのソリューションを使用する必要があります。

元の答え：

macOS Chrome / Safariで作業する

body { font-family: '.SFNSDisplay-Regular', sans-serif; }