Saya ingin menggunakan font San Francisco baru di situs. Saya sudah mencoba:

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

tidak berhasil. Saya telah mencoba jawaban atas pertanyaan ini , tetapi @font-facebukan itu solusinya di sini.

Font sistem baru Apple tidak dipublikasikan. Apple telah mulai mengabstraksi nama font sistem:

Motivasi untuk abstraksi ini adalah agar sistem operasi dapat membuat pilihan yang lebih baik pada wajah mana yang akan digunakan pada bobot tertentu. Apple juga sedang mengerjakan fitur font, seperti simbol "6" dan "9" yang dapat dipilih atau nomor non-monospace. Saya menebak bahwa mereka juga ingin menghadirkan fitur ini ke web.

Safari dan Firefox menggunakan SF untuk -apple-system; Chrome mengenali BlinkMacSystemFont:

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

Ada juga variasi lainnya:

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

Anda dapat mendemonstrasikannya di biola berikut; sebagian besar belum didukung: http://jsfiddle.net/v94gw9nx/

Saya mendapat info saya dari artikel Craig Hockenberry yang memiliki banyak info bagus tentang penggunaan font: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

Juga, beberapa info bagus di blog Surfin 'Safari tentang penggunaan font sistem abstrak: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

Dan tampaknya Apple bekerja dengan W3C untuk menstandarisasi menggunakan nama font "sistem" generik di CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

Unduh file .otf font SF untuk penggunaan pribadi Anda: https://developer.apple.com/fonts/

Tak satu pun dari jawaban saat ini termasuk yang diterima akan menggunakan font Apple San Francisco pada sistem yang tidak menginstalnya sebagai font sistem. Karena pertanyaannya bukanlah "bagaimana cara menggunakan font sistem OS X di halaman web", solusi yang benar adalah menggunakan font 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");
}

Sumber

Terakhir kali diuji: Maret 2018

Untuk menjawab pertanyaan itu

Cara menggunakan font San Francisco baru dari Apple di halaman web

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

atau (bahkan lebih pendek):

font-family: -apple-system, BlinkMacSystemFont;

sudah cukup.

Jika Anda ingin default ke font sistem pada banyak platform, saya sarankan:

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

• -apple-system- San Francisco di Safari (di Mac OS X dan iOS); Neue Helvetica dan Lucida Grande pada versi Mac OS X.
• system-ui - Font UI default pada platform tertentu.
• BlinkMacSystemFont- setara dengan -apple-system, untuk Chrome di Mac OS X.
• "Segoe UI" - Windows (Vista +) dan Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) dan Chrome OS.
• Ubuntu - semua versi Ubuntu.

Idenya dipinjam dari edisi berikut di github .

Anda dapat mencari font untuk OS lain atau versi yang lebih lama di artikel ini tentang trik css .

-apple-system memungkinkan Anda memilih San Francisco di Safari. BlinkMacSystemFont adalah alternatif yang sesuai untuk Chrome.

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

Roboto atau Helvetica Neue dapat dimasukkan sebagai cadangan bahkan sebelum sans-serif.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (bagaimana atau sebelumnya http://furbo.org/2015/07/ 09 / i-left-my-system-font-in-san-francisco / melakukan pekerjaan yang baik menjelaskan detailnya.

Jika pengguna menjalankan El Capitan atau lebih tinggi, ini akan bekerja di Chrome dengan

font-family: 'BlinkMacSystemFont';

Apple sedang mengabstraksi font sistem ke depannya. Fasilitas ini menggunakan nama keluarga generik baru -aplikasi-sistem. Jadi sesuatu seperti di bawah ini akan membuat Anda mendapatkan apa yang Anda inginkan.

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

Ini adalah pembaruan untuk pertanyaan yang agak lama ini. Saya ingin menggunakan font SF Pro baru di situs web dan tidak menemukan font CDN, selain yang disebutkan di atas (applesocial.s3.amazonaws.com).

Jelas, ini bukan tempat penyimpanan konten resmi yang disetujui oleh Apple. Sebenarnya, saya tidak menemukan tempat penyimpanan font resmi APAPUN yang menyajikan font Apple, siap digunakan oleh pengembang web.

Dan ada alasannya - jika Anda membaca perjanjian lisensi yang disertakan dengan mengunduh SF Pro baru dan font lain dari https://developer.apple.com/fonts/ - itu menyatakan di beberapa paragraf pertama dengan sangat jelas:

[...] Anda dapat menggunakan Font Apple hanya untuk membuat mock-up antarmuka pengguna yang akan digunakan dalam produk perangkat lunak yang dijalankan pada sistem operasi Apple iOS, macOS, atau tvOS, sebagaimana berlaku. Hak tersebut di atas mencakup hak untuk menampilkan Font Apple di tangkapan layar, gambar, mock-up atau penggambaran lainnya, digital dan / atau cetakan, dari produk perangkat lunak semacam itu yang berjalan hanya di iOS, macOS atau tvOS. [...]

Dan:

Kecuali secara tegas diatur di sini, Anda tidak boleh menggunakan Font Apple untuk, membuat, mengembangkan, menampilkan atau mendistribusikan dokumentasi, karya seni, konten situs web, atau produk kerja lainnya.

Lebih lanjut:

Kecuali jika diizinkan secara tersurat [...] (i) hanya satu pengguna yang boleh menggunakan Font Apple pada satu waktu, dan (ii) Anda tidak boleh membuat Font Apple tersedia melalui jaringan yang dapat dijalankan atau digunakan oleh banyak komputer pada waktu bersamaan.

Tidak ada pertanyaan lagi untuk saya. Apple jelas tidak ingin Font mereka dibagikan ke seluruh web di luar produk mereka.

Anda tidak dapat menggunakan Font Sistem Apple yang disajikan langsung dari database. Ini bertentangan dengan Lisensi, tetapi Anda dapat menggunakan ini untuk Sistem Mac yang lebih tinggi dari High Sierra

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

Atau Anda dapat menggunakan ini:

font-family: 'BlinkMacSystemFont';

Terakhir diuji pada 2015

Sebaiknya gunakan solusi ini sebagai pilihan terakhir, saat solusi lain tidak berfungsi.

Jawaban asli:

Bekerja di macOS Chrome / Safari

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