Swift

【SwiftUI】フォント(font)の指定方法を総まとめ!

こんにちは、アプリ開発者のテルです!

「フォント(font)の指定方法がわからない」とお悩みではないでしょうか?

テル

本記事ではそんな悩みを解決していきます!

本記事を読むメリット
  1. SwiftUIにおけるフォントの指定方法がわかる
  2. 体系的な解説で初心者でも理解できる

フォントサイズ指定

.font(フォントサイズ)

表示したいフォントサイズを引数で指定します。

実際の使用例で示すタイプを引数として指定することができます。ここで指定したフォントサイズは、デバイスの大きさによって柔軟に変化します。

実際の使用例

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

フォントの太さ指定

.font(フォントの太さ)

表示したいフォントの太さを引数で指定します。

実際の使用例で示すタイプを引数として指定することができます。

実際の使用例

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

フォントタイプ指定

 .font(.system(フォントサイズ, design: フォントタイプ))

表示したいフォントタイプを引数で指定します。

下記の表で示しているタイプを引数として指定することができます。

タイプ意味
.default標準
.monospaced等幅
.rounded丸ゴシック体
.serif明朝体

実際の使用例

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            // デフォルト
            Text("AppleStore")
                .font(.system(.title, design: .default))
            // 等幅
            Text("AppleStore")
                .font(.system(.title, design: .monospaced))
            // 丸ゴシック体
            Text("AppleStore")
                .font(.system(.title, design: .rounded))
            // 明朝体
            Text("AppleStore")
                .font(.system(.title, design: .serif))
        }
    }
}

フォントの装飾指定

太文字にする (bold)

.bold()

.bold()は文字太くすることのできるModifierです。

.fontWeight()との違いは特になく、先に指定した方が適用されます。

斜体にする (italic)

.italic()

.italic()は文字斜体にすることのできるModifierです。
これは斜体が用意されているフォントの場合のみ適用されます。

下線を引く (underline)

.underline(color: 色指定)

.underline()は文字に下線を引くことのできるModifierです。
色指定の部分に好きな色を引数として入れることができます。

実際の使用例

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

フォント色指定

  .foregroundColor(色指定)

表示したいフォント色を引数で指定します。

実際の使用例で示すタイプを引数として指定することができます。

実際の使用例

 struct ContentView: View {
    var body: some View {
        VStack {
            Text("Red").foregroundColor(.red)
            Text("Blue").foregroundColor(.blue)
            Text("Yellow").foregroundColor(.yellow)
            Text("Green").foregroundColor(.green)
            Text("Orange").foregroundColor(.orange)
            Text("Pink").foregroundColor(.pink)
            Text("Purple").foregroundColor(.purple)
            Text("Black").foregroundColor(.black)
            Text("Gray").foregroundColor(.gray)
        }
        .font(.largeTitle)
    }
}

フォントサイズの固定サイズ指定

.font(.system(size: サイズ, weight: フォントの太さ, design: フォントタイプ))

表示したいフォントサイズを引数で指定します。

この方法でフォントサイズを指定した場合はどのデバイスでも変化しない固定サイズとなります。

使用例

struct ContentView: View {
    var body: some View {
        Text("AppleStore")
            .font(.system(size: 100, weight: .bold, design: .rounded))
    }
}

カスタムフォント指定

.font(.custom(フォント名, size: サイズ))

表示したいフォント名を引数で指定します。

この方法を用いることで、既存では用意されていないフォントを使用することができます。適応するには指定したいフォントファイルをXcodeに読み込む必要があります。

読み込み方法については以下の記事が分かりやすくておすすめです

https://programming-sansho.com/swift/use-custom-font-with-swiftui/

使用例

struct ContentView: View {
    var body: some View {
       Text("AppleStore")
         .font(.custom("Allura", size: 99))
    }
}

まとめ

今回はSwiftUIにおけるフォントの指定方法をご紹介しました。

文字のサイズや装飾がアプリのイメージに大きな影響を与えるので、使い方をしっかりと覚えてデザインの幅を広げていきましょう。

SwiftUIの実践的なスキルを身につけたいという方にはUdemyがおすすめです。オンラインコースの数は10万以上。世界で4000万人以上の人が学習に利用しています。

最後までご覧いただきありがとうございました。ではまた!

参考文献

https://developer.apple.com/documentation/swiftui/

Flutter関連の書籍を出版しました!