Можно ли указать системный шрифт в CSS, ориентированном на iOS (для отображения в UIWebView), и получить аналогичные результаты, как при проектировании с помощью Interface Builder:

Может ли CSS установить System, System + Weight или Text Styles вместо font-family:Helvetica Neue:

Как и в let mediumWeight = UIFont.systemFontOfSize(17, weight: UIFontWeightMedium)

Ответы

Ответ 1

на iOS и OS X, используя значение CSS -apple-system для свойства CSS-шрифта "font-family".

Как отмечено в 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

В контексте (возврат к HelveticaNeue, когда -apple-system равен undefined):

<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.

Использование свойства 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 и дополнительные сведения о Swift Рецепты.

Ответ 2

Для дальнейшего расширения правильного ответа от @SwiftArchitect я отлаживал невидимый шрифт на устройстве iOS (iPhone 7 в Safari), используя Mac на Safari. Моя семейство шрифтов:

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;}