Chciałbym użyć nowej czcionki San Francisco w witrynie. Próbowałem:

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

bez skutku. Próbowałem odpowiedzi na to pytanie , ale @font-facetutaj nie jest to rozwiązanie.

Nowa czcionka systemowa Apple nie jest publicznie ujawniana. Firma Apple rozpoczęła abstrakcję nazw czcionek systemowych:

Motywacją do tej abstrakcji jest to, aby system operacyjny mógł dokonywać lepszych wyborów, na której twarzy będzie używany przy danej wadze. Apple pracuje również nad funkcjami czcionek, takimi jak wybierane glify „6” i „9” czy liczby bez stałej szerokości. Domyślam się, że chcieliby również wprowadzić te funkcje do sieci.

Safari i Firefox używają SF do -apple-system; Chrome rozpoznaje BlinkMacSystemFont:

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

Istnieją również inne odmiany:

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

Możesz je demonstrować na następujących skrzypcach; większość nie jest jeszcze obsługiwana: http://jsfiddle.net/v94gw9nx/

Informacje otrzymałem z artykułu Craiga Hockenberry, który zawiera wiele przydatnych informacji o używaniu czcionki: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

Ponadto kilka świetnych informacji na blogu Surfin 'Safari o używaniu abstrakcyjnych czcionek systemowych: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

I najwyraźniej Apple współpracuje z W3C nad standaryzacją przy użyciu ogólnej nazwy czcionki „systemowej” w CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

Pobierz pliki .otf czcionek SF do użytku osobistego: https://developer.apple.com/fonts/

Żadna z aktualnych odpowiedzi, w tym zaakceptowana, nie będzie używać czcionki Apple San Francisco w systemach, w których nie jest ona zainstalowana jako czcionka systemowa. Ponieważ pytanie nie brzmi „jak używać czcionki systemowej OS X na stronie internetowej”, właściwym rozwiązaniem jest użycie czcionek internetowych:

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

Źródło

Ostatni test: marzec 2018 r

Aby odpowiedzieć na pytanie

Jak używać nowej czcionki Apple San Francisco na stronie internetowej

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

lub (jeszcze krócej):

font-family: -apple-system, BlinkMacSystemFont;

powinno wystarczyć.

Jeśli jednak chcesz domyślnie ustawić czcionkę systemową na wielu platformach, proponuję:

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

• -apple-system- San Francisco w Safari (na Mac OS X i iOS); Neue Helvetica i Lucida Grande w starszych wersjach systemu Mac OS X.
• system-ui - domyślna czcionka UI na danej platformie.
• BlinkMacSystemFont- odpowiednik -apple-systemdla Chrome na Mac OS X.
• "Segoe UI" - Windows (Vista +) i Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) i Chrome OS.
• Ubuntu - wszystkie wersje Ubuntu.

Pomysł został zapożyczony z następującego numeru na github .

Możesz wyszukać czcionki dla innych systemów operacyjnych lub ich starszych wersji w tym artykule na temat sztuczek CSS .

-apple-system pozwala wybrać San Francisco w Safari. BlinkMacSystemFont to odpowiednia alternatywa dla Chrome.

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

Roboto lub Helvetica Neue można wstawić jako rezerwy nawet przed bezszeryfowym.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (jak lub wcześniej http://furbo.org/2015/07/ 09 / i-left-my-system-fonts-in-san-francisco / Wykonaj świetną robotę wyjaśniając szczegóły.

Jeśli użytkownik korzysta z El Capitan lub nowszego, będzie działać w Chrome z

font-family: 'BlinkMacSystemFont';

Apple dokonuje abstrakcji czcionek systemowych. Ten obiekt wykorzystuje nową generyczną nazwę rodziny -apple-system. Więc coś takiego jak poniżej powinno ci dać to, czego chcesz.

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

To jest aktualizacja tego dość starego pytania. Chciałem użyć nowych czcionek SF Pro na stronie internetowej i nie znalazłem żadnych czcionek w CDN, poza wymienionymi powyżej (appleocial.s3.amazonaws.com).

Oczywiście nie jest to oficjalne repozytorium treści zatwierdzone przez Apple. Właściwie nie znalazłem ŻADNEGO oficjalnego repozytorium czcionek obsługującego czcionki Apple, gotowego do użycia przez twórców stron internetowych.

I jest powód - jeśli czytasz umowę licencyjną, która wiąże się z pobraniem nowego SF Pro i innych czcionek z https://developer.apple.com/fonts/ - w pierwszych kilku akapitach jest to bardzo wyraźnie stwierdzone:

[...] możesz używać czcionki Apple tylko do tworzenia makiet interfejsów użytkownika do wykorzystania w oprogramowaniu działającym na systemach operacyjnych Apple iOS, macOS lub tvOS, zależnie od przypadku. Powyższe prawo obejmuje prawo do pokazywania czcionki Apple na zrzutach ekranu, obrazach, makietach lub innych przedstawieniach, cyfrowych i / lub drukowanych, takich programów działających wyłącznie w systemie iOS, macOS lub tvOS. [...]

I:

Z wyjątkiem przypadków wyraźnie przewidzianych w niniejszym dokumencie, nie możesz używać czcionki Apple do tworzenia, rozwijania, wyświetlania lub w inny sposób rozpowszechniania jakiejkolwiek dokumentacji, grafiki, zawartości witryn internetowych ani innych produktów.

Dalej:

O ile nie jest to wyraźnie dozwolone [...] (i) tylko jeden użytkownik może używać czcionki Apple w danym momencie, oraz (ii) nie możesz udostępniać czcionki Apple w sieci, w której mogłaby być uruchamiana lub używana na wielu komputerach w tym samym czasie.

Nie ma więcej pytań do mnie. Apple wyraźnie nie chce, aby ich czcionki były udostępniane w Internecie poza ich produktami.

Nie można używać czcionek systemowych Apple obsługiwanych bezpośrednio z bazy danych. Jest to niezgodne z licencją, ale możesz tego używać w systemach Mac wyższych niż High Sierra

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

Lub możesz użyć tego:

font-family: 'BlinkMacSystemFont';

Ostatnio testowany w 2015 r

Powinien używać tego rozwiązania jako ostatniego wyboru, gdy inne rozwiązania nie działają.

Oryginalna odpowiedź:

Pracuj na macOS Chrome / Safari

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