2023/4/28

【SwiftUI】文字列のフォント変更方法！サイズ/色/太さ/斜体/書体

この記事からわかること

SwiftUIで文字列(String型)をカスタマイズする方法
色やサイズ、太さ、斜体、書体などの変更方法
iOSアプリで設定できるフォント一覧

index

[open]

Swift UIにおける文字のカスタマイズ
Font構造体
文字サイズを変更する
文字サイズを自由に設定する
文字の太さを変更する
iOS15以前で他のビューに太字を適応させる方法
文字を斜体にする
文字の色を変更する
フォントデザイン(書体)を変更する
iOS組み込みの書体を使用する
日本語には適応されない
行間や文字間隔を調整する
カスタムフォントの適応方法

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

参考文献：公式リファレンス：Text input and output

Swift UIにおける文字のカスタマイズ

Swift UIでは画面に対してテキストを表示するためのビューとしてText構造体または Label構造体が定義されています。どちらも引数として渡された文字列(String型)を読み取り専用のテキストとして表示する機能を提供しています。

Text("Hello World!")
Label("Hello World", systemImage:"iphone")

Viewにあらかじめ定義されたさまざまなモディファイアを使用することで表示するテキストのサイズや色、太さなどを変更する機能がが提供されています。

Font構造体

公式リファレンス：Font構造体

@frozen  struct Font

Swift UIではフォントの設定をするための設定値や機能がFont構造体として定義されています。

Font構造体のタイププロパティにシステムフォントサイズとしてあらかじめシステムに設定された文字サイズが定義されており、使用されている環境(デバイスやフォントの設定)などによって適切なサイズへと変化します。

例えばlargeTitleとして設定された値はiOSのデフォルトサイズの場合34ポイントと決まっています。その他の実際のサイズは以下のガイドラインに記載されています。

公式リファレンス：Typography

他にもテキストを開発者がフレキシブルにカスタムするためのsystemメソッドなどが用意されています。

文字サイズを変更する

Swift UIでビューの文字サイズを変更するにはfontモディファイアを使用します。

公式リファレンス：fontメソッド

func font(_ font: Font?) -> some View

引数にはFont構造体のタイププロパティ(システムフォントサイズ)を渡します。

Text("Large Title").font(.largeTitle)
Text("Title").font(.title)
Text("Headline").font(.headline)
Text("Subheadline").font(.subheadline)
Text("Body").font(.body)
Text("Callout").font(.callout)
Text("Caption").font(.caption)
Text("Small").font(.footnote)

文字サイズを自由に設定する

文字サイズを開発者側の自由な数値に設定するにはFont構造体のsystem(size: CGFloat)メソッドを使用します。

Text("Hello, World!")
  .font(.system(size: 50))

文字の太さを変更する

文字の太さを変更するにはfontWeightメソッドを使用します。これはiOS16以降からほとんどのビューで呼び出せるようになりましたが、iOS15以前はTextなどからしか呼び出せないので注意してください。

func fontWeight(_ weight: Font.Weight?) -> Text

引数にはFont.Weight型に定義されている値を渡します。

Text("Ultra Light")
    .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構造体のboldメソッドを呼び出すことでも実装できます。.fontWeight(.bold)と同じ役割を持っています。こちらも同様にiOS15以前はTextなどからしか呼び出せないので注意してください。

Text("Hello, World!")
    .bold()

iOS15以前で他のビューに太字を適応させる方法

例えばSF-Symbolsに太字を適応させるにはfontWeightが使用できないのでfont(.system(size:,weight:))を使用します。

Image(systemName: "book")
    .font(.system(size: 20, weight: .bold))

文字を斜体にする

文字を斜体にするにはFont構造体のitalicメソッドを呼び出します。

Text("Hello, World!")
    .italic()

文字の色を変更する

文字の色を変更するには foregroundColorメソッドを使用します。引数にはColor構造体を渡します。

Text("Hello, World!")
    .foregroundColor(.cyan)
Text("Hello, World!")
    .foregroundColor(Color(red: 0.4, green: 0.6, blue: 0.5))
Text("Hello, World!")
    .foregroundColor(Color(hue: 0, saturation: 0.7, brightness: 0.8))

フォントデザイン(書体)を変更する

文字の書体を変更するにはfont(.system(_,design: Font.Design))を使用します。引数にはFont.Design型の値を指定します。

Text("Swift UI")
    .font(.system(.title,design:.default))
Text("Swift UI")    // 文字間を等間隔に
    .font(.system(.title,design:.monospaced))
Text("Swift UI")    // いわゆるゴシック体
    .font(.system(.title,design:.rounded))
Text("Swift UI")    // 装飾(セリフ)付き
    .font(.system(.title,design:.serif))

デフォルトで定義されているのは上記の通りですが、iOSに組み込まれてる書体や自身でダウンロードして組み込んだ書体を使用することも可能です。

iOS組み込みの書体を使用する

iOSにデフォルトで組み込まれてる書体は以下のリンクから確認することができます。

公式：iOS Fonts

適応させるにはfont(.custom("書体名"))メソッドを使用して書体名の文字列を渡すだけです。

Text("Swift UI")
    .font(.custom("AcademyEngravedLetPlain", size: 20))
Text("Swift UI")
    .font(.custom("AvenirNext-Heavy", size: 20))
Text("Swift UI")
    .font(.custom("BodoniOrnamentsITCTT", size: 20))
Text("Swift UI")
    .font(.custom("Chalkduster", size: 20))
Text("Swift UI")
    .font(.custom("Zapfino", size: 20))

日本語には適応されない

iOSで指定できるフォントはアルファベットに対してのみのようで日本語にはうまく適応されないようです。

Text("こんにちは")
    .font(.custom("AcademyEngravedLetPlain", size: 20))
Text("こんにちは")
    .font(.custom("AvenirNext-Heavy", size: 20))
Text("こんにちは")
    .font(.custom("BodoniOrnamentsITCTT", size: 20))
Text("こんにちは")
    .font(.custom("Chalkduster", size: 20))
Text("こんにちは")
    .font(.custom("Zapfino", size: 20))

行間や文字間隔を調整する

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
      .kerning(10)
      .lineSpacing(10)