让 iOS 在 CSS 中选择系统字体 Helvetica Neue 或 San Francisco

Question

是否可以在 CSS 中指定系统字体以 iOS 为目标（显示在 UIWebView 中），并获得与使用 [= 进行设计时类似的结果39=]界面生成器:

CSS能否设置系统、系统+权重或文本样式 而不是 font-family:Helvetica Neue:

<html>
<head>
<style type=\"text/css\">
    body{font-family:Helvetica Neue; font-size:14;}
</style>
</head>
<body></body>
</html>

系统

UIFont.systemFontOfSize(), UIFont.boldSystemFontOfSize(), UIFont.italicSystemFontOfSize()

系统+体重

如 let mediumWeight = UIFont.systemFontOfSize(17, weight: UIFontWeightMedium)

UIFontWeightUltraLight, UIFontWeightThin, UIFontWeightLight, UIFontWeightRegular, UIFontWeightMedium, UIFontWeightSemibold, UIFontWeightBold, UIFontWeightHeavy, UIFontWeightBlack

文本样式

Body, Callout, Caption 1, Caption 2, Footnote, Headline, Subhead, Title 1, Title 2, Title 3

Answer 1

on iOS and OS X by using the “-apple-system” CSS value for the “font-family” CSS Property.

如 webkit.org 所述，目前 w3c 中有关于标准化此值的讨论，因此作者可以简单地指定 system.

系统字体

-apple-system iOS 9 & Safari OS X 10.11

使用 font-family: CSS 属性:

font-family: -apple-system;
font-family: '-apple-system','HelveticaNeue'; // iOS 8 compatible, credit: @MarcoBoschi

在上下文 中（当 -apple-system 未定义时回退到 HelveticaNeue）:

<html>
<head>
<style type=\"text/css\">
    body{font-family: '-apple-system','HelveticaNeue'; font-size:17;}
</style>
</head>
<body></body>
</html>

重量和款式

使用 font-weight: CSS 属性:

normal, bold, bolder, lighter
100, 200, 300, 400, 500, 600, 700, 800, 900

使用 font-style: CSS 属性:

normal, italic

动态字体

-apple-system-xxx iOS 8.4.

Using font: CSS 属性（代表整个款式，包括尺寸和重量）：

font: -apple-system-body
font: -apple-system-headline
font: -apple-system-subheadline
font: -apple-system-caption1
font: -apple-system-caption2
font: -apple-system-footnote
font: -apple-system-short-body
font: -apple-system-short-headline
font: -apple-system-short-subheadline
font: -apple-system-short-caption1
font: -apple-system-short-footnote
font: -apple-system-tall-body

在上下文中：

<html>
<head>
<style type=\"text/css\">
    body{font: -apple-system-body;}
</style>
</head>
<body></body>
</html>

► 在 GitHub and additional details on Swift Recipes 上找到此解决方案。

Answer 2

为了进一步扩展@SwiftArchitect 的正确答案，我在 Safari 上使用 Mac 在 iOS 设备（Safari 中的 iPhone 7）上调试了一个不可见字体。我的 font-family 是：

h1, h2, h3, h4, h5 {font-family: "blisslight", blisslight, "blissregular", blissregular, Arial, sans-serif;}

iOS 忽略了包括 Arial 在内的所有后备字体，所以我最终使用它来使其工作：

h1, h2, h3, h4, h5 {font-family: -apple-system, "blisslight", blisslight, "blissregular", blissregular, Arial, Helvetica, sans-serif;}

尽管在 Web 检查器中添加了新的 CSS，但在上传新的 CSS 之前，Safari 并未将 -apple-system 呈现为可通过的代码。

让 iOS 在 CSS 中选择系统字体 Helvetica Neue 或 San Francisco

Let iOS pick the System Font Helvetica Neue or San Francisco in CSS

css

fonts

uiwebview

ios

系统字体

重量和款式

动态字体