114

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.

css

— anorganik
sumber

1

Font situs web bergantung pada apa yang diinstal di sistem pengguna atau dimuat secara eksternal. Ini hal yang cukup mudah, terutama jika font tersedia untuk digunakan.

— Sparky

210

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/

— anorganik
sumber

atau Anda dapat menggunakan nama font sepertiSanFranciscoText-Regular

4

Jika membutuhkan nomor monospace untuk ditampilkan dalam tabel, itu -apple-systemjuga mendukung ini melalui CSS font-variant-numeric: tabular-nums;.

— Palimondo

@ j08691, Apa lisensinya?

— Pacerier

1

@BryanBryce Itu hack untuk El Cap. Itu tidak berfungsi lagi, saya pikir itu disebut .SF NS Textdan .SF NS Displaysekarang, tetapi Anda tidak boleh menggunakannya. Saya akan menggunakan -apple-system. SF Text/ SF Probekerja hanya jika Anda menginstal font secara manual.

1

Ternyata -system-uicara standar baru di Chrome dan Safari. (Saya tidak ingin mencuri kredit dari jawaban Anda yang luar biasa jadi saya hanya menuliskan ini di komentar. Furbo.org/2018/03/28/system-fonts-in-css )

— Wil Shipley

65

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

— Ilias Karim
sumber

3

Jika ada yang menginginkan yang berani: sanfranciscodisplay-bold-webfont.woff

— Snow Bases

11

Catatan: jawaban ini melanggar persyaratan lisensi font Apple , yang menyatakan bahwa "[...] Anda boleh menggunakan Font Apple semata-mata untuk membuat mock-up antarmuka pengguna untuk digunakan dalam produk perangkat lunak yang berjalan di Apple iOS, iPadOS, macOS atau tvOS sistem operasi, sebagaimana berlaku " .

— Teh

36

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 .

Apakah Anda yakin ini sebenarnya San Francisco yang digunakan untuk rendering di iOS? Di iOS 12 (Simulator) tidak terlihat seperti itu; di iOS 13 tampaknya seperti itu, tetapi tidak semua mesin terbang tersedia .

— Fabien Snauwaert

@FabienSnauwaert, tidak, saya tidak yakin tentang iOS 12 dan 13. Itulah mengapa saya menambahkan tanggal ke bagian atas jawaban (yaitu jawabannya sekarang lebih dari 2 tahun, dan telah diposting bahkan sebelum iOS 12 diumumkan).

26

-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.

— Andreas Kwiatkowski
sumber

10

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

font-family: 'BlinkMacSystemFont';

— Benjamin
sumber

3

Apakah Anda memiliki tautan ke dokumentasi resmi (atau sebaliknya) tentang ini?

— Moshe Katz

4

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";
}

— dors
sumber

Bagaimana dengan kanvas HTML?

— clearlight

4

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.

— jhohlfeld
sumber

3

Dalam jawaban yang diterima, Anda dapat melihat kami tidak melayani font web Apple, kami memberi tahu browser untuk menggunakan font sistem Apple, yang saat ini adalah SF. Anda tentu tidak dapat melayani SFPro, tetapi Anda dapat menentukannya digunakan untuk orang-orang dengan perangkat Apple.

— inorganik

4

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';

— theroyakash
sumber

2

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; }

— bumfo
sumber

1

Blok kode saja tidak memberikan jawaban yang bagus. Harap tambahkan penjelasan.

— Louis Barranqueiro

1

Ini adalah satu-satunya yang berfungsi untuk saya pada lembar gaya sintaksis Atom.

— Kai

2

Perhatikan bahwa ini tidak berfungsi di iOS saat -apple-system, 'BlinkMacSystemFont'berfungsi di iOS Chrome + Safari dan OS X Chrome + Safari.

— Charlie Schliesser

1

Selain itu, saya harus menunjukkan bahwa alasan mengapa ini tidak berfungsi di iOS adalah karena font sistem dimulai dengan .SFNS di macOS saat dimulai dengan .SFUI di iOS. Jika Anda benar-benar harus melakukan ini karena suatu alasan, itu akan memperbaikinya… tetapi jangan lakukan itu!

— Jonathan Thornton

1

terima kasih, saya telah menerapkannya ke font SF dan berfungsi dengan baik. Masalah dengan -apel-sistem diterapkan di semua konten, dan mengganti gaya font-family.

— Hardik Darji