2023/4/28

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

この記事からわかること

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

index

[open]

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

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

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メソッドを使用します。

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)と同じ役割を持っています。

Text("Hello, World!")
    .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))