Ich möchte die neue Schriftart von San Francisco auf einer Website verwenden. Ich habe es versucht:

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

umsonst. Ich habe die Antworten auf diese Frage ausprobiert, bin aber @font-facehier nicht die Lösung.

Die neue Systemschriftart von Apple wird nicht öffentlich zugänglich gemacht. Apple hat begonnen, Systemschriftnamen zu abstrahieren:

Die Motivation für diese Abstraktion besteht darin, dass das Betriebssystem bessere Entscheidungen treffen kann, welches Gesicht bei einem bestimmten Gewicht verwendet werden soll. Apple arbeitet auch an Schriftfunktionen wie auswählbaren "6" - und "9" -Glyphen oder nicht monospaced Zahlen. Ich vermute, dass sie diese Funktionen auch ins Web bringen möchten.

Safari und Firefox verwenden SF für -apple-system; Chrome erkennt BlinkMacSystemFont:

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

Es gibt auch andere Variationen:

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

Sie können diese an der folgenden Geige testen. Die meisten werden noch nicht unterstützt: http://jsfiddle.net/v94gw9nx/

Ich habe meine Informationen aus Craig Hockenberrys Artikel erhalten, der viele großartige Informationen zur Verwendung der Schriftart enthält: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

Außerdem finden Sie im Surfin 'Safari-Blog einige großartige Informationen zur Verwendung abstrahierter Systemschriftarten: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

Und anscheinend arbeitet Apple mit dem W3C zusammen, um die Verwendung eines generischen "System" -Schriftnamens in CSS zu standardisieren. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

Laden Sie die .otf-Dateien für SF-Schriftarten für Ihren persönlichen Gebrauch herunter: https://developer.apple.com/fonts/

Keine der aktuellen Antworten, einschließlich der akzeptierten , verwendet die San Francisco-Schriftart von Apple auf Systemen, auf denen sie nicht als Systemschriftart installiert ist. Da die Frage nicht lautet "Wie verwende ich die OS X-Systemschriftart auf einer Webseite?", Ist die richtige Lösung die Verwendung von Webschriftarten:

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

Quelle

Zuletzt getestet: März 2018

Um die Frage zu beantworten

Verwendung der neuen Schriftart von Apple in San Francisco auf einer Webseite

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

oder (noch kürzer):

font-family: -apple-system, BlinkMacSystemFont;

sollte ausreichen.

Wenn Sie jedoch standardmäßig die Systemschriftart auf mehreren Plattformen verwenden möchten, würde ich Folgendes vorschlagen:

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

• -apple-system- San Francisco in Safari (unter Mac OS X und iOS); Neue Helvetica und Lucida Grande auf älteren Versionen von Mac OS X.
• system-ui - Standard-UI-Schriftart auf einer bestimmten Plattform.
• BlinkMacSystemFont- Entspricht -apple-systemfür Chrome unter Mac OS X.
• "Segoe UI" - Windows (Vista +) und Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) und Chrome OS.
• Ubuntu - Alle Versionen von Ubuntu.

Die Idee stammt aus der folgenden Ausgabe von Github .

In diesem Artikel über CSS-Tricks können Sie nach Schriftarten für andere Betriebssysteme oder ältere Versionen suchen .

-apple-system ermöglicht es Ihnen, San Francisco in Safari auszuwählen. BlinkMacSystemFont ist die entsprechende Alternative für Chrome.

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

Roboto oder Helvetica Neue könnten schon vor der Serifenlosigkeit als Fallbacks eingefügt werden.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (wie oder zuvor http://furbo.org/2015/07/ 09 / i-left-my-system-fonts-in-san-francisco / mache einen tollen Job und erkläre die Details.

Wenn der Benutzer El Capitan oder höher ausführt, funktioniert es in Chrome mit

font-family: 'BlinkMacSystemFont';

Apple abstrahiert künftig die Systemschriftarten. Diese Einrichtung verwendet ein neues generisches Familiennamen-Apfel-System. So etwas wie unten sollte Ihnen das bringen, was Sie wollen.

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

Dies ist ein Update dieser ziemlich alten Frage. Ich wollte die neuen SF Pro-Schriftarten auf einer Website verwenden und fand außer den oben genannten (applesocial.s3.amazonaws.com) keine CDN-Schriftarten.

Dies ist eindeutig kein offizielles Content-Repository, das von Apple genehmigt wurde. Tatsächlich habe ich KEIN offizielles Schriftarten-Repository gefunden, das Apple-Schriftarten bereitstellt und von Webentwicklern verwendet werden kann.

Und es gibt einen Grund - wenn Sie die Lizenzvereinbarung lesen, die mit dem Herunterladen des neuen SF Pro und anderer Schriftarten von https://developer.apple.com/fonts/ geliefert wird - heißt es in den ersten Absätzen sehr deutlich:

[...] Sie dürfen die Apple-Schriftart ausschließlich zum Erstellen von Modellen von Benutzeroberflächen verwenden, die in Softwareprodukten verwendet werden, die auf Apples iOS-, macOS- oder tvOS-Betriebssystemen ausgeführt werden. Das vorstehende Recht umfasst das Recht, die Apple-Schriftart in Screenshots, Bildern, Modellen oder anderen digitalen und / oder gedruckten Darstellungen solcher Softwareprodukte anzuzeigen, die ausschließlich unter iOS, macOS oder tvOS ausgeführt werden. [...]

Und:

Sofern hierin nicht ausdrücklich vorgesehen, dürfen Sie die Apple-Schriftart nicht zum Erstellen, Entwickeln, Anzeigen oder sonstigen Verteilen von Dokumentationen, Grafiken, Website-Inhalten oder anderen Arbeitsprodukten verwenden.

Des Weiteren:

Sofern nicht ausdrücklich anders gestattet, [...] darf (i) jeweils nur ein Benutzer die Apple-Schriftart verwenden, und (ii) Sie dürfen die Apple-Schriftart nicht über ein Netzwerk verfügbar machen, in dem sie von mehreren Computern ausgeführt oder verwendet werden kann gleichzeitig.

Keine Fragen mehr an mich. Apple möchte eindeutig nicht, dass seine Schriftarten außerhalb seiner Produkte im Internet geteilt werden.

Sie können Apple System Font nicht direkt aus einer Datenbank verwenden. Es ist gegen die Lizenz, aber Sie können dies für Mac-Systeme verwenden, die höher als High Sierra sind

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

Oder Sie können dies verwenden:

font-family: 'BlinkMacSystemFont';

Zuletzt getestet im Jahr 2015

Sollte diese Lösung als letzte Wahl verwenden, wenn andere Lösungen nicht funktionieren.

Ursprüngliche Antwort:

Arbeiten Sie unter macOS Chrome / Safari

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