科技

2022 年 1 月 25 日

SwiftUI|Text:font size 內建文字大小與自訂方法!

已複製到剪貼板


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

分享文章

已複製到剪貼板

主題文章

查看 科技

關於

「看我所見」主題多元,分享作者的生活經歷、特殊經驗,舉凡:教育、生活、科技、3C、音樂、娛樂 ⋯⋯,我們也將持續優化,提供讀者最好的體驗!


Contacts

Ricky Chuang

看我所見

linktr.ee/5j_54d93

最新文章

Newest Articles

來自「看我所見」的最新文章

了解更多