iOS16 中的 3 种新字体宽度样式

继续创作，加快成长！这是我参加「日新方案 10 月更文应战」的第27天，点击查看活动概况

前言

在 iOS 16 中，Apple 引入了三种新的宽度款式字体到 SF 字体库。

1. Compressed

2. Condensed

3. 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 中运用新宽度款式的两种办法。

1. 将 UIfont 转为 Font。
2. 创立 Font 扩展。

将 UIfont 转为 Font

咱们从 在 SwiftUI 中如何将 UIFont 转换为 Font 中了解到，Font 有初始化办法能够接收 UIFont 作为参数。

步骤如下

1. 你需求创立一个带有新宽度款式的 UIFont。
2. 运用该 UIFont 创立一个 Font 。
3. 然后像一般 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)))

你也能够用新的宽度款式来操控文本的可读性。

下面的这个比如，阐明不同宽度款式如何影响每行的字符数和阶段长度

下载这种字体

你能够在 Apple 字体渠道 来下载这种新的字体宽度款式。

下载安装后，你将会发现一种结合了现有宽度和新宽度款式的新款式。

基本上，除了在模拟器的模拟系统 UI 中，在任何地方都被禁止运用 SF 字体。请保证你在运用前阅览并了解许可证。