聊聊 iOS16 中的三種新字體寬度樣式

作者：Swift君 2022-10-26 09:03:45

移動開發 iOS

在 Xcode 14.1 中，SwiftUI 提供了兩個新的 API 設置這種新的寬度樣式。 width(_:) 和 fontWidth(_:)。

前言

在 iOS 16 中，Apple 引入了三種新的寬度樣式字體到 SF 字體庫。

Compressed
Condensed
Expend

UIFont.Width

Apple 引入了新的結構體 UIFont.Width，這代表了一種新的寬度樣式。

目前已有的四種樣式。

standard：我們總是使用的默認寬度。
compressed：最窄的寬度樣式。
condensed：介于壓縮和標準之間的寬度樣式。
expanded：最寬的寬度樣式。

SF 字體和新的寬度樣式

如何將 SF 字體和新的寬度樣式一起使用

為了使用新的寬度樣式，Apple 有一個新的 UIFont 的類方法來接收新的 UIFont.Width 。

class UIFont : NSObject {
    class func systemFont(
        ofSize fontSize: CGFloat,
        weight: UIFont.Weight,
        width: UIFont.Width
    ) -> UIFont
}

你可以像平常創建字體那樣來使用新的方法。

let condensed = UIFont.systemFont(ofSize: 46, weight: .bold, width: .condensed)
let compressed = UIFont.systemFont(ofSize: 46, weight: .bold, width: .compressed)
let standard = UIFont.systemFont(ofSize: 46, weight: .bold, width: .standard)
let expanded = UIFont.systemFont(ofSize: 46, weight: .bold, width: .expanded)

SwiftUI

更新：在 Xcode 14.1 中，SwiftUI 提供了兩個新的 API 設置這種新的寬度樣式。 width(_:) 和 fontWidth(_:)。

目前（Xcode 16 beta 6），這種新的寬度樣式和初始值設定只能在 UIKit 中使用，幸運的是，我們可以在 SwiftUI 中輕松的使用它。

有很多種方法可以將 UIKit 集成到 SwiftUI 。我將會展示在 SwiftUI 中使用新寬度樣式的兩種方法。

將 UIfont 轉為 Font。
創建 Font 擴展。

將 UIfont 轉為 Font

我們從 在 SwiftUI 中如何將 UIFont 轉換為 Font^[1] 中了解到，Font 有初始化方法可以接收 UIFont 作為參數。

步驟如下

你需要創建一個帶有新寬度樣式的 UIFont。
使用該 UIFont 創建一個 Font 。
然后像普通 Font 一樣使用它們。

struct NewFontExample: View {
    // 1
    let condensed = UIFont.systemFont(ofSize: 46, weight: .bold, width: .condensed)
    let compressed = UIFont.systemFont(ofSize: 46, weight: .bold, width: .compressed)
    let standard = UIFont.systemFont(ofSize: 46, weight: .bold, width: .standard)
    let expanded = UIFont.systemFont(ofSize: 46, weight: .bold, width: .expanded)
    
    var body: some View {
        VStack {
            // 2
            Text("Compressed")
                .font(Font(compressed))
            Text("Condensed")
                .font(Font(condensed))
            Text("Standard")
                .font(Font(standard))
            Text("Expanded")
                .font(Font(expanded))
        }
    }
}

創建帶有新寬度樣式的 UIFont。
用 UIFont 初始化 Font，然后傳遞給 .font 修改。

創建一個 Font 擴展

這種方法實際上和將 UIfont 轉為 Font 是同一種方法。我們只需要創建一個新的 Font 擴展在 SwiftUI 中使用起來更容易一些。

extension Font {
    public static func system(
        size: CGFloat,
        weight: UIFont.Weight,
        width: UIFont.Width) -> Font
    {
        // 1
        return Font(
            UIFont.systemFont(
                ofSize: size,
                weight: weight,
                width: width)
        )
    }
}

創建一個靜態函數傳遞 UIFont 需要的參數。然后，初始化 UIFont 和創建 Font 。

我們就可以像這樣使用了。

Text("Compressed")
    .font(.system(size: 46, weight: .bold, width: .compressed))
Text("Condensed")
    .font(.system(size: 46, weight: .bold, width: .condensed))
Text("Standard")
    .font(.system(size: 46, weight: .bold, width: .standard))
Text("Expanded")
    .font(.system(size: 46, weight: .bold, width: .expanded))

如何使用新的寬度樣式

你可以在你想使用的任何地方使用。不會有任何限制，所有的新寬度都有一樣的尺寸，同樣的高度，只會有寬度的變化。

這里是擁有同樣文本，同樣字體大小和同樣字體樣式的不同字體寬度樣式展示。

新的寬度樣式優點

你可以使用新的寬度樣式在已經存在的字體樣式上，比如 thin 或者 bold ，在你的 app 上創造出獨一無二的體驗。

Apple 將它使用在他們的照片app ，在 "回憶'' 功能中，通過組合不同的字體寬度和樣式在標題或者子標題上。

這里有一些不同寬度和樣式的字體組合，希望可以激發你的靈感。

Text("Pet Friends")
    .font(Font(UIFont.systemFont(ofSize: 46, weight: .light, width: .expanded)))
Text("OVER THE YEARS")
    .font(Font(UIFont.systemFont(ofSize: 30, weight: .thin, width: .compressed)))

Text("Pet Friends")
    .font(Font(UIFont.systemFont(ofSize: 46, weight: .black, width: .condensed)))
Text("OVER THE YEARS")
    .font(Font(UIFont.systemFont(ofSize: 20, weight: .light, width: .expanded)))