Vorrei utilizzare il nuovo carattere San Francisco su un sito. Ho provato:

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

inutilmente. Ho provato le risposte a questa domanda , ma @font-facenon è la soluzione qui.

Il nuovo font di sistema di Apple non è pubblicamente esposto. Apple ha iniziato ad astrarre i nomi dei font di sistema:

La motivazione di questa astrazione è che il sistema operativo può fare scelte migliori su quale faccia utilizzare a un dato peso. Apple sta anche lavorando sulle caratteristiche dei caratteri, come glifi selezionabili "6" e "9" o numeri non a spaziatura fissa. Suppongo che vorrebbero portare queste funzionalità anche sul Web.

Safari e Firefox utilizzano SF per -apple-system; Chrome riconosce BlinkMacSystemFont:

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

Esistono anche altre varianti:

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

Puoi dimostrarli nel seguente violino; la maggior parte non è ancora supportata: http://jsfiddle.net/v94gw9nx/

Ho ricevuto le mie informazioni dall'articolo di Craig Hockenberry che contiene molte ottime informazioni sull'utilizzo del carattere: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

Inoltre, alcune ottime informazioni sul blog Safari di Surfin sull'uso di caratteri di sistema astratti: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

E a quanto pare Apple sta lavorando con il W3C per standardizzare utilizzando un nome di carattere "di sistema" generico nei CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

Scarica i file .otf dei font SF per uso personale: https://developer.apple.com/fonts/

Nessuna delle risposte attuali, inclusa quella accettata , utilizzerà il carattere San Francisco di Apple su sistemi che non lo hanno installato come carattere di sistema. Poiché la domanda non è "come posso utilizzare il carattere di sistema OS X su una pagina Web", la soluzione corretta è utilizzare i caratteri 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");
}

fonte

Ultima volta testato: marzo 2018

Per rispondere alla domanda

Come utilizzare il nuovo font San Francisco di Apple su una pagina web

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

o (anche più breve):

font-family: -apple-system, BlinkMacSystemFont;

dovrebbe essere sufficiente.

Se si desidera impostare il carattere di sistema predefinito su più piattaforme, tuttavia, suggerirei:

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

• -apple-system- San Francisco in Safari (su Mac OS X e iOS); Neue Helvetica e Lucida Grande su versioni precedenti di Mac OS X.
• system-ui - carattere dell'interfaccia utente predefinito su una determinata piattaforma.
• BlinkMacSystemFont- equivalente a -apple-system, per Chrome su Mac OS X.
• "Segoe UI" - Windows (Vista +) e Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) e Chrome OS.
• Ubuntu - tutte le versioni di Ubuntu.

L'idea è stata presa in prestito dal seguente numero su GitHub .

Puoi cercare i caratteri per altri sistemi operativi o versioni precedenti di essi in questo articolo sui trucchi css .

-apple-system ti permette di scegliere San Francisco in Safari. BlinkMacSystemFont è l'alternativa corrispondente per Chrome.

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

Roboto o Helvetica Neue potrebbero essere inseriti come fallback anche prima del sans-serif.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (come o in precedenza http://furbo.org/2015/07/ 09 / i-left-my-system-fonts-in-san-francisco / faccio un ottimo lavoro spiegando i dettagli.

Se l'utente esegue El Capitan o versioni successive, funzionerà in Chrome con

font-family: 'BlinkMacSystemFont';

Apple sta astraggendo i caratteri di sistema in futuro. Questa struttura utilizza un nuovo nome di famiglia generico -apple-system. Quindi qualcosa come sotto dovrebbe darti quello che vuoi.

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

Questo è un aggiornamento a questa domanda piuttosto vecchia. Volevo utilizzare i nuovi caratteri SF Pro su un sito Web e non ho trovato alcun CDN di caratteri, oltre a quelli sopra indicati (appleocial.s3.amazonaws.com).

Chiaramente, questo non è un repository di contenuti ufficiale approvato da Apple. In realtà, non ho trovato NESSUN repository ufficiale di caratteri che serva caratteri Apple, pronti per essere utilizzati dagli sviluppatori web.

E c'è un motivo: se leggi il contratto di licenza fornito con il download del nuovo SF Pro e di altri font da https://developer.apple.com/fonts/ , nei primi paragrafi si afferma molto chiaramente:

[...] puoi utilizzare il carattere Apple esclusivamente per la creazione di modelli di interfacce utente da utilizzare in prodotti software in esecuzione sui sistemi operativi iOS, macOS o tvOS di Apple, a seconda dei casi. Il diritto di cui sopra include il diritto di mostrare il carattere Apple in schermate, immagini, modelli o altre rappresentazioni, digitali e / o stampate, di tali prodotti software in esecuzione esclusivamente su iOS, macOS o tvOS. [...]

E:

Ad eccezione di quanto espressamente previsto nel presente documento, non puoi utilizzare il carattere Apple per creare, sviluppare, visualizzare o distribuire in altro modo documentazione, grafica, contenuto del sito Web o qualsiasi altro prodotto di lavoro.

Ulteriore:

Salvo quanto diversamente espressamente consentito [...] (i) solo un utente alla volta può utilizzare il carattere Apple e (ii) l'utente non può rendere disponibile il carattere Apple su una rete in cui potrebbe essere eseguito o utilizzato da più computer allo stesso tempo.

Niente più domande per me. Apple chiaramente non vuole che i propri font siano condivisi sul Web al di fuori dei propri prodotti.

Non è possibile utilizzare il carattere di sistema Apple servito direttamente da un database. È contro la licenza, ma puoi usarlo per sistemi Mac superiori a High Sierra

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

Oppure puoi usare questo:

font-family: 'BlinkMacSystemFont';

Ultimo test nel 2015

Dovrebbe usare questa soluzione come ultima scelta, quando altre soluzioni non funzionano.

Risposta originale:

Lavora su macOS Chrome / Safari

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