---
description: ╱🚧 -> breadcrum,
---

# Font

[SwiftUI](../..) ⟩ [controls](..) ⟩ [Text]() ⟩ Font&#x20;

{% hint style="info" %}
An environment-dependent font.
{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}
* [custom-font](font/custom-font "mention")
{% endtab %}

{% tab title="👥 相關" %}
* used in [](<> "mention").
* flexible font size with [resizablefont](../../view/view/resizablefont "mention").
{% endtab %}

{% tab title="💾 程式" %}
```swift
Text("12:34:56")
  .font(.system(size: 72, design: .monospaced))  // ⭐️ monospaced font

Text("12:34:56")
  .monospacedDigit()        // ⭐️ monospaced digit
```
{% endtab %}

{% tab title="🗺️ 圖表" %}
{% hint style="info" %}
* kerning: 不同字元間的「合適距離」。
* tracking: 「字元間距」，就是 CSS 中的 letter-spacing。
* leading: 「行距」。
{% endhint %}

![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2F7VxWoKtzzjtkvK1ESofO%2Ffont.jpg?alt=media\&token=43931a02-3209-4620-be56-36090dfb0a69)
{% endtab %}

{% tab title="📘 手冊" %}
* Developer ⟩&#x20;
  * [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically)
  * [Apple Fonts](https://developer.apple.com/fonts/) - fonts for Apple platforms
  * [SF Symbols](https://developer.apple.com/sf-symbols/)
* SwiftUI ⟩ [Text Input & Output](https://developer.apple.com/documentation/swiftui/text-input-and-output) ⟩&#x20;
  * view modifiers: [.fontWeight(\_:)](https://developer.apple.com/documentation/swiftui/view/fontweight\(_:\))
  * [Text](https://developer.apple.com/documentation/swiftui/text) ⟩&#x20;
    * [baselineOffset(\_:)](https://developer.apple.com/documentation/swiftui/text/baselineoffset\(_:\))
    * [font(\_:)](https://developer.apple.com/documentation/swiftui/text/font\(_:\))
    * [monospacedDigit()](https://developer.apple.com/documentation/swiftui/text/monospaceddigit\(\))
  * [Font](https://developer.apple.com/documentation/swiftui/font) ⟩ [monospacedDigit()](https://developer.apple.com/documentation/swiftui/font/monospaceddigit\(\))
* UIKit ⟩ Fonts ⟩ [UIFont](https://developer.apple.com/documentation/uikit/uifont) ⟩ [capHeight](https://developer.apple.com/documentation/uikit/uifont/1619035-capheight)
{% endtab %}

{% tab title="📗 參考" %}
* [ ] Design+Code ⟩ [Typography and Dynamic Type](https://designcode.io/ios-design-handbook-typography-and-dynamic-type)
* [ ] Sarun ⟩&#x20;
  * [ ] [How to change SwiftUI font size](https://sarunw.com/posts/how-to-change-swiftui-font-size/)
  * [ ] [How to style SwiftUI text Font](https://sarunw.com/posts/swiftui-text-font/)
  * [ ] [How to change SwiftUI Font Width](https://sarunw.com/posts/swiftui-font-width/)
  * [ ] [Best Free Fonts for iOS](https://sarunw.com/posts/free-fonts-ios/)
* [x] Loaf ⟩ [Monospace Digits](https://useyourloaf.com/blog/monospace-digits/)
* [ ] JustFont ⟩ [字體123：必需知道的基本知識](https://blog.justfont.com/2012/09/%E5%AD%97%E9%AB%94123%EF%BC%9A%E5%BF%85%E9%9C%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%9F%A5%E8%AD%98%EF%BC%88%E5%A2%9E%E8%A3%9C%EF%BC%89/) - Kerning, Tracking, Leading.
{% endtab %}

{% tab title="🛠 工具" %}
* [iFont](https://apps.apple.com/tw/app/ifont-find-install-any-font/id1173222289)
{% endtab %}

{% tab title="🗣 討論" %}
* [Aligning SwiftUI text to the baseline and top of another text](https://stackoverflow.com/questions/63843516/aligning-swiftui-text-to-the-baseline-and-top-of-another-text)
{% endtab %}
{% endtabs %}
