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 上的各個字體大小如下圖。如果覺得圖片太小,或畫質不夠,可以直接點擊圖片能進入全螢幕!