我想在网站上使用新的旧金山字体.我试过了:
font: 'San Francisco', Helvetica, Arial, san-serif;
无济于事.我已经尝试过这个问题的答案,但这@font-face不是解决方案.
ino*_*nik 187
Apple的新系统字体未公开显示.Apple已开始抽象系统字体名称:
这种抽象的动机是操作系统可以在给定权重的哪个面上做出更好的选择.Apple还在研究字体功能,例如可选择的"6"和"9"字形或非等宽数字.我猜他们也希望将这些功能带到网上.
Safari和Firefox使用SF -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/
我从Craig 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/
显然,Apple正在与W3C合作,在CSS中使用通用的"系统"字体名称进行标准化.https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html
下载SF字体.otf文件供您个人使用:https://developer.apple.com/fonts/
Ili*_*rim 55
当前的答案(包括已接受的答案)都不会在未安装系统字体的系统上使用Apple的旧金山字体.由于问题不是"我如何在网页上使用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");
}
小智 26
-apple-system允许您在Safari中选择旧金山.BlinkMacSystemFont是Chrome的相应替代品.
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
即使在sans-serif之前,Roboto或Helvetica Neue也可以作为后备插入.
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 /做了很好的解释细节.
Fil*_* W. 25
解决这个问题
如何在网页上使用Apple的新旧金山字体
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-systemMac OS X上的Chrome."Segoe UI" - Windows(Vista +)和Windows Phone.Roboto - Android(Ice Cream Sandwich(4.0)+)和Chrome OS.Ubuntu - 所有版本的Ubuntu.您可以在本文的css-tricks中查找其他操作系统或其旧版本的字体.
Ben*_*min 10
如果用户正在运行El Capitan或更高版本,它将在Chrome中运行
font-family: 'BlinkMacSystemFont';
这是对这个相当老的问题的更新。我想在网站上使用新的 SF Pro 字体，但没有发现字体 CDN，除了上面提到的 (applesocial.s3.amazonaws.com)。
显然，这不是 Apple 批准的官方内容存储库。实际上，我没有找到任何提供 Apple 字体的官方字体库，供 Web 开发人员使用。
还有一个原因——如果你阅读了从https://developer.apple.com/fonts/下载新的 SF Pro 和其他字体所附带的许可协议——它在前几段中非常清楚地说明：
[...] 您只能将 Apple 字体用于创建用户界面模型，以用于在 Apple 的 iOS、macOS 或 tvOS 操作系统（如适用）上运行的软件产品中使用。上述权利包括在仅在 iOS、macOS 或 tvOS 上运行的此类软件产品的屏幕截图、图像、模型或其他描述、数字和/或印刷品中显示 Apple 字体的权利。[...]
和：
除非在此明确规定，否则您不得使用 Apple 字体来创建、开发、展示或以其他方式分发任何文档、插图、网站内容或任何其他工作产品。
更远：
除非另有明确允许 [...] (i) 一次只能有一个用户使用 Apple 字体，并且 (ii) 您不得通过网络提供 Apple 字体，以便它可以由多台计算机运行或使用同时。
没有更多的问题要问我。Apple 显然不希望他们的字体在其产品之外通过网络共享。
小智 6
您不能使用直接从数据库提供的 Apple 系统字体。它违反许可证，但您可以将其用于高于 High Sierra 的 Mac 系统
body
{
font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}
或者你可以使用这个：
font-family: 'BlinkMacSystemFont';
小智 6
试试这个：
font-family: 'SF Pro Text',-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
这对我有用。;)
如果有效的话请点赞。
小智 5
苹果正在对系统字体进行抽象化。该设施使用新的通用家族名称 -apple-system。所以像下面这样的东西应该能让你得到你想要的。
body
{
font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}