[SwiftUI]Text(テキスト)を太字にするには？

SwiftUI

2022.05.12

どうも、ちょげ(@chogetarou)です。

Text(テキスト)を太字にする方法を紹介します。

方法
まとめ

方法

Textを太字にする方法は、４つあります。

bold修飾子

１つ目は、bold修飾子を使う方法です。

具体的には、Textにbold修飾子を付与します。

Text("テキスト")
    .bold()

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .bold()
        }
    }
}

fontWeight修飾子

２つ目は、fontWeight修飾子を使う方法です。

まず、TextにfontWeight修飾子を付与します。

そして、fontWeight修飾子の引数に「.bold」を指定します。

Text("テキスト")
    .fontWeight(.bold)

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .fontWeight(.bold)
        }
    }
}

Font.XX.bold()

３つ目は、Font.XX.bold()を使う方法です。（XXはフォント名）

まず、Textにfont修飾子を付与します。

そして、font修飾子の引数にFont.XX.bold()を指定します。

Text("テキスト")
    .font(Font.XX.bold()) //XXはフォント名

使用例

struct ContentView: View {
    
    @Environment(\.colorScheme) var colorScheme: ColorScheme
    
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .foregroundColor(colorScheme == .dark ? Color.white : Color.black)
        }
    }
}

Font.system

４つ目は、Font.systemを使う方法です。

まず、Textにfont修飾子を付与します。

font修飾子の引数に「.system(size:weight:design:)」を指定します。

そして、「.system(size:weight:design:)」の引数「size」に文字サイズ、第２引数に「.bold」、第３引数に「.default」を指定します。

Text("テキスト")
    .font(.system(size: 文字サイズ, weight: .bold, design: .default))

上記のfont修飾子を付与したTextのテキストは、太字になります。

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .font(.system(size: 54, weight: .bold, design: .default))
        }
    }
}