具有自定义大小的文本样式的系统字体

Question

Aim:

I would like to know how to use a system font in my SwiftUI app with a custom size that supports dynamic size (that changes when the user changes the text size on the device, font size changes dynamically).

Problem:

I can use the standard .body , .title etc for system fonts, however I want to use a custom size which is slightly different however still want to make sure it works with dynamic types

My Failed Attempt:

//Font size doesn't change when the user changes his preferred text size on the device
Text("hello")
    .font(.system(size: 14, weight: .bold, design: .default))

Note:

I am targeting iOS 15 , I am looking for something on the lines of the following for system font:

static func custom(_ name: String, size: CGFloat, relativeTo textStyle: Font.TextStyle) -> Font

Questions:

• Is there a way to specify the system font name in the above API? If so what is the font name for iOS 15 and macOS Monterey?
• Is there any other way to achieve dynamic fonts for system font with custom sizes?

Answer 1

There isn't a way to do this, however I realised that one of the pre-defined text styles meets the requirements.

There is a way to chain together font modifiers (styling a font like bold() )

Example:

.font(.body.bold())

Answer 2

I made it with somewhat hacky font size estimation based on current sizeCategory :

public enum AppTextStyle {
    case veryCustomTextStyle
    case anotherCustomTextStyle
}

struct ScaledFontModifier: ViewModifier {
    
    @Environment(\.sizeCategory) var sizeCategory
    var textStyle: AppTextStyle

    func body(content: Content) -> some View {
        content.font(font(for: textStyle))
    }
    
    private func font(for style: AppTextStyle) -> Font {
        switch style {
        case .veryCustomTextStyle:
            return .system(size: scaledValue(for: 42))
        case .anotherCustomTextStyle:
            return .system(size: scaledValue(for: 42), weight: .medium)
        }
    }

    private func scaledValue(for size: CGFloat) -> CGFloat {
        switch sizeCategory {
        case .extraSmall:
            return size - 3
        case .small:
            return size - 2
        case .medium:
            return size - 1
        case .large:
            return size
        case .extraLarge:
            return size + 2
        case .extraExtraLarge:
            return size + 4
        case .extraExtraExtraLarge:
            return size + 6
        case .accessibilityMedium:
            return size + 11
        case .accessibilityLarge:
            return size + 16
        case .accessibilityExtraLarge:
            return size + 23
        case .accessibilityExtraExtraLarge:
            return size + 30
        case .accessibilityExtraExtraExtraLarge:
            return size + 36
        @unknown default:
            return size
        }
    }
}

public extension View {
    func font(_ textStyle: AppTextStyle) -> some View {
        modifier(ScaledFontModifier(textStyle: textStyle))
    }
}

You can use it along the built-in fonts, or you can put all your app text styles in AppTextStyle enum:

Text("Hello")
    .font(.body)
Text("World")
    .font(.veryCustomTextStyle)