如何在網頁上使用蘋果新舊金山字體

Question

我想在網站上使用新舊金山字體。我試過了：

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

無濟於事。我試過this question的答案，但@font-face不是這裏的解決方案。

Answer 1

Apple的新系統字體未公開。蘋果已經開始提取系統字體名稱：

這種抽象的動機是，操作系統可以更好地選擇在給定重量下使用哪個面。 Apple還在研究字體功能，如可選的「6」和「9」字形或非等寬字體。我猜他們也想把這些功能帶到網上。

Safari和Firefox使用SF for -apple-system; Chrome的認識BlinkMacSystemFont：

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

也有其他的變化：

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 

您可以在下面擺弄這些演示;大多數還不支持：http://jsfiddle.net/v94gw9nx/

我從克雷格Hockenberry的文章裏面有很多的偉大的信息有關使用字體我的信息： http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

此外，在的Surfin' Safari的博客有關使用一些偉大的信息抽象的系統字體：https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

而且很顯然，蘋果正在與W3C的工作在CSS中使用一個通用的「系統」的字體名稱規範。 https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

下載SF字體雜項文件文件個人使用：https://developer.apple.com/fonts/

Answer 2

蘋果抽象的系統字體向前發展。該設施使用新的通用家族名稱 - 蘋果系統。所以像下面這樣的東西應該讓你得到你想要的。

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

Answer 3

如果用戶正在運行埃爾卡皮坦或更高版本，它將在使用的Chrome與

font-family: 'BlinkMacSystemFont'; 

Answer 4

使用Chrome/Safari瀏覽器

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

Answer 5

目前的答案都不對工作包括被接受的將使用蘋果的舊金山字體系統，沒有安裝它作爲系統字體。由於問題不是「我怎麼使用OS X系統中的字體在網頁上」正確的解決方案是使用網頁字體：

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

Source

Answer 6

- 蘋果系統允許您選擇聖舊金山在Safari。 BlinkMacSystemFont是Chrome的相應替代品。

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

Roboto或Helvetica Neue甚至可以在sans-serif之前作爲回退插入。

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a（http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/怎麼還是以前做大量的工作，解釋的細節。

Answer 7

爲了解決這個問題

如何使用蘋果的新舊金山的字體在網頁上

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

或（甚至更短）：

font-family: -apple-system, BlinkMacSystemFont; 

應該就足夠了。

如果你想默認爲在多個平臺上的系統字體，不過，我建議：

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

• -apple-system - 舊金山的Safari（在Mac OS X和iOS）; Neue Helvetica和Lucida Grande在舊版本的Mac OS X上。
• system-ui - 給定平臺上的默認UI字體。
• BlinkMacSystemFont - 的-apple-system當量，Chrome瀏覽器在Mac OS X
• "Segoe UI" - 的Windows（Vista的+）和Windows Phone。
• Roboto - Android（冰淇淋三明治（4.0）+）和Chrome操作系統。
• Ubuntu - 所有版本的Ubuntu。

這個想法是從以下issue on github借來的。

您可以在article on css-tricks這個article on css-tricks中查找其他操作系統或其他操作系統的舊版本的字體。