Je souhaite utiliser la nouvelle police San Francisco sur un site. J'ai essayé:

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

en vain. J'ai essayé les réponses à cette question , mais ce @font-facen'est pas la solution ici.

La nouvelle police système d'Apple n'est pas exposée publiquement. Apple a commencé à extraire les noms de polices système:

La motivation de cette abstraction est que le système d'exploitation puisse faire de meilleurs choix sur la face à utiliser à un poids donné. Apple travaille également sur les fonctionnalités de police, telles que les glyphes sélectionnables «6» et «9» ou les nombres non espacés. Je suppose qu'ils aimeraient également intégrer ces fonctionnalités sur le Web.

Safari et Firefox utilisent SF pour -apple-system; Chrome reconnaît BlinkMacSystemFont:

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

Il existe également d'autres variantes:

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

Vous pouvez en faire la démonstration au violon suivant; la plupart ne sont pas encore pris en charge: http://jsfiddle.net/v94gw9nx/

J'ai obtenu mes informations de l'article de Craig Hockenberry qui contient beaucoup d'informations intéressantes sur l'utilisation de la police: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

En outre, quelques informations intéressantes sur le blog Safari de Surfin sur l'utilisation des polices système abstraites: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

Et apparemment, Apple travaille avec le W3C pour normaliser en utilisant un nom de police générique «système» en CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

Téléchargez les fichiers .otf de la police SF pour votre usage personnel: https://developer.apple.com/fonts/

Aucune des réponses actuelles, y compris celle acceptée , n'utilisera la police San Francisco d'Apple sur les systèmes qui ne l'ont pas installée comme police système. Étant donné que la question n'est pas «comment utiliser la police système OS X sur une page Web», la bonne solution consiste à utiliser des polices 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");
}

La source

Dernière fois testé: mars 2018

Pour répondre à la question

Comment utiliser la nouvelle police San Francisco d'Apple sur une page Web

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

ou (encore plus court):

font-family: -apple-system, BlinkMacSystemFont;

devrait suffire.

Si vous souhaitez utiliser par défaut la police système sur plusieurs plates-formes, je vous suggère:

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

• -apple-system- San Francisco dans Safari (sur Mac OS X et iOS); Neue Helvetica et Lucida Grande sur les anciennes versions de Mac OS X.
• system-ui - police d'interface utilisateur par défaut sur une plate-forme donnée.
• BlinkMacSystemFont- équivalent de -apple-system, pour Chrome sur Mac OS X.
• "Segoe UI" - Windows (Vista +) et Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) et Chrome OS.
• Ubuntu - toutes les versions d'Ubuntu.

L'idée est empruntée au numéro suivant sur github .

Vous pouvez rechercher des polices pour d'autres systèmes d'exploitation ou des versions plus anciennes de celles-ci dans cet article sur les astuces css .

-apple-system vous permet de choisir San Francisco dans Safari. BlinkMacSystemFont est l'alternative correspondante pour Chrome.

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

Roboto ou Helvetica Neue pourraient être insérés comme solutions de secours avant même le sans-serif.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (comment ou précédemment http://furbo.org/2015/07/ 09 / i-left-my-system-fonts-in-san-francisco / faites un excellent travail en expliquant les détails.

Si l'utilisateur exécute El Capitan ou une version ultérieure, il fonctionnera dans Chrome avec

font-family: 'BlinkMacSystemFont';

Apple fait abstraction des polices système à l'avenir. Cette installation utilise le nouveau nom de famille générique -apple-system. Donc, quelque chose comme ci-dessous devrait vous donner ce que vous voulez.

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

Ceci est une mise à jour de cette question plutôt ancienne. Je voulais utiliser les nouvelles polices SF Pro sur un site Web et je n'ai trouvé aucune police CDN, à part ce qui précède (applesocial.s3.amazonaws.com).

De toute évidence, ce n'est pas un référentiel de contenu officiel approuvé par Apple. En fait, je n'ai trouvé AUCUN référentiel de polices officiel servant des polices Apple, prêt à être utilisé par les développeurs Web.

Et il y a une raison - si vous lisez le contrat de licence qui accompagne le téléchargement de la nouvelle SF Pro et d'autres polices à partir de https://developer.apple.com/fonts/ - il indique très clairement dans les premiers paragraphes:

[...] vous pouvez utiliser la police Apple uniquement pour créer des maquettes d'interfaces utilisateur à utiliser dans des produits logiciels fonctionnant sur les systèmes d'exploitation Apple iOS, macOS ou tvOS, selon le cas. Le droit qui précède comprend le droit d'afficher la police Apple dans des captures d'écran, des images, des maquettes ou d'autres représentations, numériques et / ou imprimées, de tels produits logiciels fonctionnant uniquement sur iOS, macOS ou tvOS. [...]

Et:

Sauf disposition expresse des présentes, vous ne pouvez pas utiliser la police Apple pour créer, développer, afficher ou distribuer de quelque manière que ce soit de la documentation, des illustrations, du contenu de site Web ou tout autre produit de travail.

Plus loin:

Sauf autorisation expresse contraire [...] (i) un seul utilisateur peut utiliser la police Apple à la fois, et (ii) vous ne pouvez pas rendre la police Apple disponible sur un réseau où elle pourrait être exécutée ou utilisée par plusieurs ordinateurs en même temps.

Plus de questions pour moi. Apple ne souhaite clairement pas que ses polices soient partagées sur le Web en dehors de ses produits.

Vous ne pouvez pas utiliser la police système Apple servie directement à partir d'une base de données. C'est contre la licence, mais vous pouvez l'utiliser pour les systèmes Mac supérieurs à High Sierra

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

Ou vous pouvez utiliser ceci:

font-family: 'BlinkMacSystemFont';

Dernier test en 2015

Devrait utiliser cette solution comme dernier choix, lorsque d'autres solutions ne fonctionnent pas.

Réponse originale:

Travailler sur macOS Chrome / Safari

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