Custom font size for Text in SwiftUI

128

我视图中有一个标签,我想使用系统字体的中等大小,大小为21点。
我创建了一个自定义扩展来重用所创建的字体:


I have a label in my view that I want to use the system font size in medium, with a size of 21 points.
I created a custom extension to re-use the font created:
extension Font {
    static var primaryButton: Font {
        return Font.custom("SFUIDisplay-Light", size: 21)
    }
}

然而,这没有任何效果。我将字符串更改为HelveticaNeue-UltraLight,它确实起作用了,所以我猜SFUIDisplay-Light只是不正确的字体名称。
在字体册中,它说SFProText-Light,但对我也没有起作用。

在SwiftUI中,三藩市字体的正确字体名称是什么?
或者:如何使用系统字体设置字体大小?

7个回答

268
您可以使用以下代码为系统字体设置明确的大小:

.font(.system(size: 60))

5
他的代码有什么问题?如果他想使用除系统字体以外的东西怎么办? - Zorayr
让视图等于{...}; 返回条件?view.font(.system(size: 60)):view.font(.custom("CUSTOM_FONT_NAME", size: 60)) - Jared Updike

41

你可以像这样设置自定义字体大小,

.font(.custom("FONT_NAME", size: 20))

1
我尝试了Font.custom("SFProText-Bold", size: 16),但它没有起作用。 - Ekambaram E
1
@EkambaramE 确保正确提供字体名称,而不是字体文件名称。 - Kannan Prasad
@KannanPrasad,“SFProText-Bold”是错误的字体名称吗? - Zorayr
2
小心使用自定义字体名称。我有一个在MacOS上使用的UIKit应用程序,它使用了一种字体,但我不知道这种字体是由Microsoft Office安装的,而不是默认的MacOS字体。在我的Mac上工作得很好,但在其他没有安装特定字体的Mac上,我的文本字段显示为空白。 - Darrell Root

38
Text("Default font design").font(Font.system(size:30, design: .default))
Text("Monospaced font design").font(Font.system(size:30, design: .monospaced))
Text("Rounded font design").font(Font.system(size:30, design: .rounded))
Text("Serif font design").font(Font.system(size:30, design: .serif))

Text("Large Title").font(.largeTitle)
Text("Title").font(.title)
Text("Headline").font(.headline)
Text("SubHeadline").font(.subheadline)
Text("Body").font(.body)
Text("Callout").font(.callout)
Text("Caption").font(.caption)
Text("FootNote").font(.footnote)

Text("Custom font").font(Font.custom("OpenSans-Bold", size: 12.3))

更多细节请访问: https://github.com/arjun011/SwiftUI-Controls


15

如果您想为文本设置自定义字体,比如Helvetica Neue,那么您可以这样做

Text("Hello World")
.font(.custom("Helvetica Neue", size: 20))
如果您只想使用系统字体,那么您可以像这样做
Text("Hello World")
.font(.system(size: 20, weight: .light, design: .default))

8
// Using system font "San Francisco"
let fontSystem = Font.system(size: 13.0)

// Using installed custom font
let fontCustom = Font.custom("YOUR FONT NAME", size: 13.0)

你可以将font*常量放在需要设置字体样式的位置。
请参阅https://developer.apple.com/documentation/swiftui/font中的“获取系统字体”部分了解更多信息。

3

如果你和我一样在寻找一种选项来添加一个具有特定大小的系统字体,并且还可以针对动态类型进行缩放:

//Usage:
Text("Hello World").systemFont(size: 8.0, relativeTo: .caption, weight: .semibold)

extension View {
    func systemFont(size: CGFloat, relativeTo textStyle: Font.TextStyle, weight: Font.Weight = .regular) -> some View {
        modifier(SystemText(size: size, relativeTo: textStyle, weight: weight))
    }
}
struct SystemText: ViewModifier {
    @ScaledMetric var fontSize: CGFloat
    private let weight: Font.Weight

    init(size: CGFloat, relativeTo textStyle: Font.TextStyle, weight: Font.Weight = .regular) {
        _fontSize = ScaledMetric(wrappedValue: size, relativeTo: textStyle)
        self.weight = weight
    }

    func body(content: Content) -> some View {
        content.font(.system(size: fontSize).weight(weight))
    }
}


0

这是我的做法。

HStack {
 Text("hello world")
  .customFont(AppFonts.WorkSansSemiBold())
   .foregroundColor(Color(.label))
 }

这里就是魔法所在

import SwiftUI

public enum AppFonts {
    case WorkSansSemiBold(size: CGFloat = 20)
    case WorkSansMedium(size: CGFloat = 17)
    case WorkSansBold(size: CGFloat = 34)
    
    var rawValue: Font? {
        switch self {
        case .WorkSansSemiBold(let size):
            return Font.custom("WorkSans-SemiBold", size: size)
        case .WorkSansBold(let size):
            return Font.custom("WorkSans-Bold", size: size)
        case .WorkSansMedium(size: let size):
            return Font.custom("WorkSans-Medium", size: size)
        }
    }
}

extension View {
    func customFont(_ customFont: AppFonts) -> some View {
        self.font(customFont.rawValue)
    }
}

然后当我需要自定义大小时

.customFont(AppFonts.WorkSansSemiBold(size: 14))

看一下“可变字体”,它使事情变得更简单,它允许您使用单个字体文件的.fontWeight(.semibold)或其他选项。 - Nicolas Manzini

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接