いろは2993462 views
中学理科1627564 views
高校国語786245 views
中学数学622001 views
高校化学2915516 views
英語609347 views
数学講師2862298 views
りんご197191 views
教育149067 views
高校日本史190006 views

SwiftUI Text のフォント設定

Text のフォントは .font() モディファイアで設定します。SwiftUI にはあらかじめ用意されたテキストスタイルがあり、Dynamic Type にも自動対応してくれます。

システムテキストスタイル

Apple が推奨するテキストスタイルを使うと、ユーザーの設定に応じてサイズが自動調整されます。

VStack(alignment: .leading, spacing: 12) {
    Text("Large Title").font(.largeTitle)
    Text("Title").font(.title)
    Text("Title 2").font(.title2)
    Text("Title 3").font(.title3)
    Text("Headline").font(.headline)
    Text("Body").font(.body)
    Text("Callout").font(.callout)
    Text("Subheadline").font(.subheadline)
    Text("Footnote").font(.footnote)
    Text("Caption").font(.caption)
    Text("Caption 2").font(.caption2)
}

システムフォントでサイズを指定

具体的なサイズを指定したい場合は .system(size:) を使います。

Text("カスタムサイズ")
    .font(.system(size: 24))

ウェイトやデザインも指定できます。

Text("太字で丸みのあるフォント")
    .font(.system(size: 20, weight: .bold, design: .rounded))

design には .default.rounded.serif.monospaced があります。

カスタムフォント

アプリにバンドルしたフォントを使う場合は .custom() を使います。

Text("カスタムフォント")
    .font(.custom("Helvetica Neue", size: 18))

テキストスタイルに合わせて相対的なサイズ調整をしたい場合は、relativeTo: を指定します。

Text("相対サイズ")
    .font(.custom("Helvetica Neue", size: 18, relativeTo: .body))

こうすると Dynamic Type の設定に応じてサイズがスケールします。