まず、サンプルとして以下のビューを用意した。

struct ContentView: View {
  var body: some View {
    Text("Hello World")
      .font(.title)
  }
}

このTextビューに対し、以下のような装飾を付ける様々なモディファイアを今回は紹介していく。

フォントの太さを変更する

fontWeightモディファイアでは、引数の値に応じてフォントの太さを変更することができる。

struct ContentView: View {
  var body: some View {
    Text("Hello World")
      .font(.title)
      .fontWeight(.heavy)
  }
}

ここではheavyを指定しているが、他にも以下の値を設定することができる。

  • ultraLight
  • thin
  • light
  • regular
  • medium
  • semibold
  • bold
  • heavy
  • black

文字のカーニングを設定する

kerningモディファイアでは、カーニング（字間調整）を設定することができる。

引数に正の数を指定すると字間を広げ、負の数を指定すると狭くする。

struct ContentView: View {
  var body: some View {
    Text("Hello World")
      .font(.title)
      .kerning(10)
  }
}

文字に下線をつける

underlineモディファイアでは、文字に下線を設定することができる。

struct ContentView: View {
  var body: some View {
    Text("Hello World")
      .font(.title)
      .underline()
  }
}

また、第一引数に下線をつけるかどうかのBool値、第二引数に下線の色を設定することもできる。

.underline(true, color: .red)

文字に取り消し線をつける

strikethroughモディファイアでは、文字に取り消し線をつけることができる。

struct ContentView: View {
  var body: some View {
    Text("Hello World")
      .font(.title)
      .strikethrough()
  }
}

こちらもunderlineモディファイア同様、第一引数に取り消し線をつけるかどうかのBool値、第二引数に取り消し線の色を設定することもできる。

行間を設定する

lineSpacingモディファイアでは、テキストの行間を設定することができる。
※行間を確認するためframeで横幅サイズを制限している。

struct ContentView: View {
  var body: some View {
    Text("Hello World")
      .font(.title)
      .frame(width: 80)
      .lineSpacing(30)
  }
}

モディファイアを組み合わせる

これらの装飾モディファイアを組み合わせると、以下のような見た目をしたテキストを作ることができる。

struct ContentView: View {
  var body: some View {
    Text("Hello World")
      .font(.title)
      .fontWeight(.heavy)
      .kerning(10)
      .underline()
      .strikethrough()
      .frame(width: 150)
      .lineSpacing(30)
  }
}