【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)
【SwiftUI】文字列のフォント変更方法!サイズ/色/太さ/斜体/書体

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

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

Text("Hello, World!")
  .font(.system(size: 50))
【SwiftUI】文字列のフォント変更方法!サイズ/色/太さ/斜体/書体

文字の太さを変更する

文字の太さを変更するには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)
【SwiftUI】文字列のフォント変更方法!サイズ/色/太さ/斜体/書体

また別の方法としてFont構造体のboldメソッドを呼び出すことでも実装できます。.fontWeight(.bold)と同じ役割を持っています。

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

文字を斜体にする

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

Text("Hello, World!")
    .italic()
【SwiftUI】文字列のフォント変更方法!サイズ/色/太さ/斜体/書体

文字の色を変更する

文字の色を変更するには 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))
【SwiftUI】文字列のフォント変更方法!サイズ/色/太さ/斜体/書体

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

文字の書体を変更するには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))
【SwiftUI】文字列のフォント変更方法!サイズ/色/太さ/斜体/書体

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

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

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

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

公式: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))
【SwiftUI】文字列のフォント変更方法!サイズ/色/太さ/斜体/書体

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

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

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index