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

Je voudrais utiliser la nouvelle police de 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 @font-face n’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 fonts système:

La motivation de cette abstraction est que le système d’exploitation peut faire de meilleurs choix sur le visage à utiliser pour un poids donné. Apple travaille également sur les fonctions de police, telles que les glyphes sélectionnables «6» et «9» ou les nombres non espacés. Je pense qu’ils aimeraient également mettre 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 supportés: http://jsfiddle.net/v94gw9nx/

J’ai reçu mes informations de l’article de Craig Hockenberry qui contient de nombreuses informations sur l’utilisation de la police: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

En outre, de bonnes informations sur le blog Surfin ‘Safari sur l’utilisation des fonts 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 l’utilisation d’un nom de police “système” générique dans CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

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

Aucune des réponses actuelles, y compris celle acceptée , n’utilisera la police Apple de San Francisco sur les systèmes sur lesquels elle n’est pas installée en tant que police système. Comme la question n’est pas “comment utiliser la police système OS X sur une page Web”, la solution correcte consiste à utiliser des fonts 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

-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ées comme solutions de repli avant même que le sans-serif.

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

La dernière fois testé: mars 2018


Pour répondre à la question

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

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

ou (encore plus court):

 font-family: -apple-system, BlinkMacSystemFont; 

devrait suffire.

Si vous voulez par défaut utiliser 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 (sous Mac OS X et iOS); Neue Helvetica et Lucida Grande sur les anciennes versions de Mac OS X.
  • system-ui – police d’interface par défaut sur une plate-forme donnée.
  • BlinkMacSystemFont – équivalent de -apple-system , pour Chrome sous 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 fonts pour d’autres systèmes d’exploitation ou des versions plus anciennes dans cet article sur css-sortingcks .

Si l’utilisateur exécute El Capitan ou supérieur, il fonctionnera avec Chrome avec

 font-family: 'BlinkMacSystemFont'; 

Apple fait abstraction des fonts système. Cette fonction 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"; } 

Travailler avec Chrome / Safari

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