SwiftUI Views Text font:文章前言
在我們開發、撰寫 iOS app 時,一定會使用到 Text() 文字元件,而設定文字的字體、大小、顏色⋯⋯等等,就是一件非常重要的事情了!
Apple 在 SwiftUI 中提供了很多內建的字體大小 .font() 可以使用,但我們很常是需要用試的來試出想要的文字大小,非常麻煩,也不一定能記得某兩種內建的字體是哪一個比較大,或哪一個比較小。
本篇文章幫大家整理這些內建的字體大小排序,以及如果想要讓文字更大或更小的話,應該要怎麼做!
SwiftUI Text:font 內建文字大小
Apple 的 SwiftUI 中,提供了 11 種內建的字體大小 .font() 可以使用,以下由大到小列出:
| SwiftUI Text font | 相關說明 |
|---|---|
| largeTitle | 內建文字大小(Text font)中最大的 |
| title | 中文翻譯:標題 |
| title2 | |
| title3 | |
| headline | 使用時會預設有粗體的效果 |
| body | 當我們只有 Text("") 沒有 .font 時,會預設是 .body |
| callout | |
| subheadline | |
| footnote | 中文翻譯:註解 |
| caption | |
| caption2 | 內建文字大小(Text font)中最小的 |
Swift 程式碼的話,只要用「.font()」就能直接設定字體大小:
SwiftUI Text:font system size 自訂文字大小
但是在開發 iOS app 時,如果覺得以上的 11 種內建字體大小不夠用的話,例如想要比 .largeTitle 還大,或想比 .caption2 還再更小的話,我們就能使用 system size 來自定文字的大小!
Swift 程式碼的話,只要用「.font(.system(size: ))」就能直接設定字體大小:
SwiftUI Text font:size 文字大小總整理
最後幫大家整理了這 11 種內建的文字大小(text font)與對應的 system size,在開發 iOS app 時,直接對應這個表格,應該能方便許多!加速 UI 設計!
| System size | SwiftUI Text font |
|---|---|
| 34 | largeTitle |
| 28 | title |
| 22 | title2 |
| 20 | title3 |
| 18 | headline |
| 17(預設) | body |
| 16 | callout |
| 15 | subheadline |
| 13 | footnote |
| 12 | caption |
| 11 | caption2 |
由此可以發現 SwiftUI 中的內建 Text font size 文字大小是在 11 到 34 之間,所以只要將 system size 設定超出這個區間,就能讓文字更大或更小了。
實際顯示在 iPhone 13 Pro Max 上的各個字體大小如下圖。如果覺得圖片太小,或畫質不夠,可以直接點擊圖片能進入全螢幕!