web-dev-qa-db-ja.com

CSSでiOSにシステムフォントHelvetica NeueまたはSan Franciscoを選択させる

IOSをターゲットとするCSS（UIWebViewに表示される）でシステムフォントを指定し、を使用して設計する場合と同様の結果を得ることができますかインターフェースビルダー：

IB Font Menu

CSS setSystem、System + WeightまたはText Styles_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
_
ioscssfontsuiwebview
23
SwiftArchitect

iOSおよびOS Xでは、「font-family」CSSプロパティに「-Apple-system」CSS値を使用します。

webkit.org で述べたように、現在w3cでこの値の標準化に関する議論があり、作成者はsystemを簡単に指定できます。

システムフォント

-Apple-systemiOS 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

ダイナミックフォント

-iOS-8.4上のApple-system-xxx.

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>

enter image description here

► GitHub でこのソリューションを見つけ、 Swift Recipes で追加の詳細を見つけてください。

62
SwiftArchitect

@SwiftArchitectによる正しい答えをさらに拡張するために、Safari上のMacを使用してiOSデバイス（SafariのiPhone 7）で非表示フォントをデバッグしました。私のフォントファミリーは：

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

Safariは、Webインスペクターに新しいCSSを追加したにもかかわらず、新しいCSSがアップロードされるまで-Apple-systemを合格コードとしてレンダリングしませんでした。

1
JustinM