こんにちは、テルプロです！
「フォント(font)の指定方法がわからない」とお悩みではないでしょうか？
本記事ではそんな悩みを解決していきます！
- SwiftUIにおけるフォントの指定方法がわかる
- 体系的な解説で初心者でも理解できる
フォントサイズ指定
.font(フォントサイズ)表示したいフォントサイズを引数で指定します。
実際の使用例で示すタイプを引数として指定することができます。ここで指定したフォントサイズは、デバイスの大きさによって柔軟に変化します。
実際の使用例
struct ContentView: View {
var body: some View {
VStack {
Group{
Text("largeTitle").font(.largeTitle)
Text("title").font(.title)
Text("title2").font(.title2)
Text("title3").font(.title3)
Text("headline").font(.headline)
Text("subheadline").font(.subheadline)
Text("body").font(.body)
}
Text("callout").font(.callout)
Text("caption").font(.caption)
Text("caption2").font(.caption2)
Text("footnote").font(.footnote)
Text("default")
}
}
}フォントの太さ指定
.font(フォントの太さ)表示したいフォントの太さを引数で指定します。
実際の使用例で示すタイプを引数として指定することができます。
実際の使用例
struct ContentView: View {
var body: some View {
VStack {
Text("ultraLight").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)
Text("default")
}.font(.title)
}
}フォントタイプ指定
.font(.system(フォントサイズ, design: フォントタイプ))表示したいフォントタイプを引数で指定します。
下記の表で示しているタイプを引数として指定することができます。
| タイプ | 意味 |
|---|---|
| .default | 標準 |
| .monospaced | 等幅 |
| .rounded | 丸ゴシック体 |
| .serif | 明朝体 |
実際の使用例
struct ContentView: View {
var body: some View {
VStack(spacing: 20) {
// デフォルト
Text("AppleStore")
.font(.system(.title, design: .default))
// 等幅
Text("AppleStore")
.font(.system(.title, design: .monospaced))
// 丸ゴシック体
Text("AppleStore")
.font(.system(.title, design: .rounded))
// 明朝体
Text("AppleStore")
.font(.system(.title, design: .serif))
}
}
}フォントの装飾指定
太文字にする (bold)
.bold().bold()は文字太くすることのできるModifierです。
.fontWeight()との違いは特になく、先に指定した方が適用されます。
斜体にする (italic)
.italic().italic()は文字斜体にすることのできるModifierです。
これは斜体が用意されているフォントの場合のみ適用されます。
下線を引く (underline)
.underline(color: 色指定).underline()は文字に下線を引くことのできるModifierです。
色指定の部分に好きな色を引数として入れることができます。
実際の使用例
struct ContentView: View {
var body: some View {
VStack(spacing: 20) {
// デフォルト
Text("SwiftUI")
// 太文字
Text("SwiftUI")
.bold()
// 斜体
Text("SwiftUI")
.italic()
// 下線
Text("SwiftUI")
.underline(color: .red)
}.font(.title)
}
}フォント色指定
.foregroundColor(色指定)表示したいフォント色を引数で指定します。
実際の使用例で示すタイプを引数として指定することができます。
実際の使用例
struct ContentView: View {
var body: some View {
VStack {
Text("Red").foregroundColor(.red)
Text("Blue").foregroundColor(.blue)
Text("Yellow").foregroundColor(.yellow)
Text("Green").foregroundColor(.green)
Text("Orange").foregroundColor(.orange)
Text("Pink").foregroundColor(.pink)
Text("Purple").foregroundColor(.purple)
Text("Black").foregroundColor(.black)
Text("Gray").foregroundColor(.gray)
}
.font(.largeTitle)
}
}フォントサイズの固定サイズ指定
.font(.system(size: サイズ, weight: フォントの太さ, design: フォントタイプ))表示したいフォントサイズを引数で指定します。
この方法でフォントサイズを指定した場合はどのデバイスでも変化しない固定サイズとなります。
使用例
struct ContentView: View {
var body: some View {
Text("AppleStore")
.font(.system(size: 100, weight: .bold, design: .rounded))
}
}カスタムフォント指定
.font(.custom(フォント名, size: サイズ))表示したいフォント名を引数で指定します。
この方法を用いることで、既存では用意されていないフォントを使用することができます。適応するには指定したいフォントファイルをXcodeに読み込む必要があります。
▼読み込み方法については以下の記事が分かりやすくておすすめです
https://programming-sansho.com/swift/use-custom-font-with-swiftui/
使用例
struct ContentView: View {
var body: some View {
Text("AppleStore")
.font(.custom("Allura", size: 99))
}
}まとめ
今回は、SwiftUIにおけるフォントの指定方法をご紹介しました。
文字のサイズや装飾がアプリのイメージに大きな影響を与えるので、使い方をしっかりと覚えてデザインの幅を広げていきましょう。
▼以下では、私の実体験に基づいて「Swiftの効率的な勉強法」の具体的な手順を詳しく解説しています。ぜひ参考にしてみてください！
最後までご覧いただきありがとうございました。ではまた！
参考文献
https://developer.apple.com/documentation/swiftui/
