【SwiftUI】Textのフォントサイズや種類とその指定方法

今回はSwiftUIでテキスト使用できるフォントの種類とその指定方法を紹介します。

デザインを考える際にもフォントの種類と指定は重要になるので、どんなフォントがあるのかを頭の片隅に置いておくといいと思います！

参考ページ：https://developer.apple.com/documentation/swiftui/font

文字サイズの指定方法
フォントのスタイル
フォントデザインの指定
フォントサイズの指定
SwiftUI勉強中の方へ

文字サイズの指定方法

.font()を使用することでテキストのフォントサイズを変更することができます。
実際にコードとテキストを表示した画面です。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("text")
            VStack {
                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)
        }
    }
}

フォントのスタイル

ここでは太字と斜体の指定方法を紹介します。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("text")
            Text("bold").bold()
            Text("italic").italic()
        }.font(.title)
    }
}

フォントデザインの指定

struct ContentView: View {
    var body: some View {
        VStack {
            Text("iPhone")
                .font(.system(.title, design: .default))
            Text("iPhone")
                .font(.system(.title, design: .monospaced))
            Text("iPhone")
                .font(.system(.title, design: .rounded))
            Text("iPhone")
                .font(.system(.title, design: .serif))
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("iPhone")
                .font(.system(size: 45).lowercaseSmallCaps())
            Text("iPhone")
                .font(.system(size: 45).monospacedDigit())
            Text("iPhone")
                .font(.system(size: 45).smallCaps())
            Text("iPhone")
                .font(.system(size: 45).uppercaseSmallCaps())
        }
    }
}

フォントサイズの指定

数字でフォントサイズを指定する方法です。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("size: 25")
                .font(.system(size: 25))
            Text("size: 50")
                .font(.system(size: 50))
            Text("size: 75")
                .font(.system(size: 75))
            Text("size: 100")
                .font(.system(size: 100))
        }
    }
}