SwiftUI之iOS16中的三种SF字体的样式和使用
创始人
2024-02-06 00:31:23

一、前言

  • 在 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

  • 我们知道,将 UIFont 转换到字体,可以使用 init(_ font: CTFont) 初始化器将 UIKit UIFont 转换为 SwiftUI Font。初始化器接收 CTFont 作为参数,CTFont 是一种不透明的类型,代表字体对象。
  • NSFont 和 UIFont 都可以自由与 CTFont 连接,如下是将 UIKit UIFont 转换为 SwiftUI Font 示例:
let uiFont = UIFont.systemFont(ofSize: 18, weight: .bold) 	
let font = Font(uiFont)
  • 至于如何将字体转换到 UIFont 呢?虽然可以轻松地将 UIFont 转换为 Font,但是不能反过来,因为 UIFont 比 Font 包含更多的灵活性和方法,可以用 Font 做的任何事情,都可能在 UIFont 中找到一种等效的方法。
  • 因此,Font 有初始化方法可以接收 UIFont 作为参数,创建带有新宽度样式的 UIFont,用 UIFont 初始化 Font, 然后传递给 .font 修改。步骤如下:
    • 需要创建一个带有新宽度样式的 UIFont;
    • 使用该 UIFont 创建一个 Font;
    • 然后像普通 Font 一样使用它们。
struct NewFontExample: View {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 {Text("Compressed").font(Font(compressed))Text("Condensed").font(Font(condensed))Text("Standard").font(Font(standard))Text("Expanded").font(Font(expanded))}}
}

② 创建一个 Font 扩展

  • 这种方法实际上和将 UIfont 转为 Font 是同一种方法,只需要创建一个新的 Font 扩展在 SwiftUI 中使用起来更容易一些:
extension Font {public static func system(size: CGFloat,weight: UIFont.Weight,width: UIFont.Width) -> Font{// 1return 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 字体,因此需要确保在使用前阅读并理解许可证。

相关内容

热门资讯

埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...