如何在网页上使用苹果新旧金山字体

我想在网站上使用新旧金山字体。我试过了：如何在网页上使用苹果新旧金山字体

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

无济于事。我试过this question的答案，但@font-face不是这里的解决方案。

来源

2015-09-18 inorganik

@Sparky我特别询问SF字体，并且有一种特定的方法可以做到这一点。 – inorganik

网站字体要么取决于用户系统中安装的内容，要么取决于外部加载的内容。这是非常简单的东西，特别是如果字体可供使用。 – Sparky

@ Sparky你不能争辩说有一种非常独特的使用SF的具体方式，这就是我所要求的。我提供的答案，使用'-apple-system'作为'font'或'font-family'的值是使用SF字体的解决方案，也是使用SF字体的解决方案。 – inorganik

125

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/

来源

2015-09-18 20:48:53 inorganik

开发人员可以从https://developer.apple.com/fonts/ – j08691

获取字体，或者您可以使用字体名称，例如'SanFranciscoText-Regular' – Dev

如果需要在表格中显示单宽度数字，则“-apple-system”也通过CSS ['font-variant-numeric：tabular-nums;']（https://developer.mozilla.org/en/docs/Web/CSS/font-variant-numeric）支持。 – Palimondo

苹果抽象的系统字体向前发展。该设施使用新的通用家族名称 - 苹果系统。所以像下面这样的东西应该让你得到你想要的。

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

来源

2015-09-18 20:51:35 dors

HTML画布怎么样？ – clearlight

如果用户正在运行埃尔卡皮坦或更高版本，它将在使用的Chrome与

font-family: 'BlinkMacSystemFont';

来源

2015-11-22 04:45:42 Benjamin

你有链接到任何官方（或其他）有关此文件？ –

可以确认这适用于Chrome。很酷！ – Erick

使用Chrome/Safari浏览器

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

来源

2015-12-12 11:13:07 bumfo

单独一个代码块并不能提供很好的答案。请添加解释。 –

这是Atom语法样式表中唯一适用于我的工具。 – Kai

请注意，这在iOS中不起作用，而'-apple-system'，'BlinkMacSystemFont''可在iOS Chrome + Safari和OS X Chrome + Safari中使用。 –

目前的答案都不对工作包括被接受的将使用苹果的旧金山字体系统，没有安装它作为系统字体。由于问题不是“我怎么使用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

来源

2016-04-04 20:30:56

嗯，我没有看到在该tumblr任何地方的SF字体。 – inorganik

我既不，@无组织，谢谢你指出。我只是将我的评论基于链接的要点。也许苹果自发布之后就改变了字体。 –

- 苹果系统允许您选择圣旧金山在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/怎么还是以前做大量的工作，解释的细节。

来源

2016-04-28 13:35:49

为了解决这个问题

如何使用苹果的新旧金山的字体在网页上

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中查找其他操作系统或其他操作系统的旧版本的字体。

来源

2017-12-19 05:40:42

如何在网页上使用苹果新旧金山字体

回答

相关问题