（2020/12/02 更新）
フォントの指定方法を解説します。
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】12.2
【Swift】5.3.1
【iOS】14.2
【macOS】Catalina バージョン 10.15.7
【Swift】5.3.1
【iOS】14.2
【macOS】Catalina バージョン 10.15.7
文字のサイズ指定
|
1 2 3 |
.font(定義済フォントサイズ) |
使用例で示す定義済フォントサイズを引数で指定します。
これらはiOSが提供する組み込みフォントサイズであり、実際にどのフォントが使用されるかは、機種や設定に依存します。
ユーザーのフォントに対する設定に応じて自動的に拡大または縮小されます
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
struct ContentView: View { var body: some View { VStack { Group { Text("default") Text("largeTitle").font(.largeTitle) Text("title").font(.title) Text("title2 *").font(.title2) Text("title3 *").font(.title3) Text("headline").font(.headline) Text("subheadline").font(.subheadline) Text("body").font(.body) } Text("callout").font(.callout) Text("caption").font(.caption) Text("caption2 *").font(.caption2) Text("footnote").font(.footnote) Divider() Text("*付きのフォントはiOS14から使用可能です").font(.footnote) } } } |
文字の太さ指定
|
1 2 3 |
.fontWeight(フォントの太さ） |
表示するフォントの太さを引数で指定します。
使用例で示すタイプが指定可能です。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
struct ContentView: View { var body: some View { VStack { Text("default") Text("ultraLight").fontWeight(.ultraLight) Text("thin").fontWeight(.thin) Text("light").fontWeight(.light) Text("regular").fontWeight(.regular) Text("medium").fontWeight(.medium) Text("semibold").fontWeight(.semibold) Text("bold").fontWeight(.bold) Text("heavy").fontWeight(.heavy) Text("black").fontWeight(.black) }.font(.title) } } |
文字の装飾
文字の装飾に使用可能なその他のModifierです。
太文字にする（bold）
|
1 2 3 |
.bold() |
文字を太文字にします。
.fontWeight()とは競合となり、先に指定した方が適用されます。
斜体にする（italic）
|
1 2 3 |
.italic() |
文字を斜体にします。
斜体が用意されているフォントの場合のみ適用されます。
下線を引く（underline）
|
1 2 3 |
.underline(color: 色指定) |
引数（color）で指定した色のアンダーラインを付加します。
引数を省略した場合はforgroudColorが適用されます。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
struct ContentView: View { var body: some View { VStack(spacing: 20) { // 標準 Text("SwiftUI") // 太文字 Text("SwiftUI") .bold() // 斜体 Text("SwiftUI") .italic() // 下線 Text("SwiftUI") .underline(color: .red) }.font(.title) } } |
フォントタイプの指定
|
1 2 3 |
.font(.system(定義済フォントサイズ, design: フォントタイプ)) |
引数(design）にて、フォントタイプを指定できます。
指定できる値は次の通りです。
指定したタイプが用意されているフォントの場合のみ適用されます。
| 値 | 意味 |
|---|---|
| .default | 標準 |
| .monospaced | 等幅 |
| .rounded | 丸ゴシック体 |
| .serif | 明朝体 |
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
struct ContentView: View { var body: some View { VStack(spacing: 20) { Text("SwiftUI") .font(.system(.title, design: .default)) // 標準 Text("SwiftUI") .font(.system(.title, design: .monospaced)) // 等幅 Text("SwiftUI") .font(.system(.title, design: .rounded)) // 丸ゴシック体 Text("SwiftUI") .font(.system(.title, design: .serif)) // 明朝体 } } } |
サイズを数値で指定する
|
1 2 3 |
.font(.system(size: サイズ, weight: フォントの太さ, design: フォントタイプ)) |
引数(size)でフォントのサイズを数値で指定します。
この場合、フォントのサイズは機種や設定に依存せず、指定したサイズに固定となります。
使用例
|
1 2 3 4 5 6 7 8 |
struct ContentView: View { var body: some View { Text("SwiftUI") .font(.system(size: 100, weight: .black, design: .default)) } } |
フォント名で指定する
|
1 2 3 |
.font(.custom(フォント名, size: サイズ)) |
表示するフォントをフォント名およびサイズ（数値）で指定します。
この場合、フォントのサイズは機種や設定に依存せず、指定したサイズに固定となります。
使用例
|
1 2 3 4 5 6 7 8 |
struct ContentView: View { var body: some View { Text("SwiftUI") .font(.custom("Times-Roman", size: 100)) } } |
あわせて読みたい記事
【SwiftUI】Textの使い方
（2021/09/24 更新） Textは読み取り専用テキストを表示するViewです。 UiKitのUILabelに相当する部品です。
capibara1969.com
2019.12.16
