Поддержка полужирного текста с помощью пользовательских шрифтов в SwiftUI

При создании доступного текста необходимо учитывать множество предпочтений! Для некоторых людей чтение полужирного текста улучшает его восприятие. Введите предпочтение Bold Text: параметр iOS, который увеличивает вес всего текста для обеспечения лучшей читаемости.

Когда пользователь включает предпочтение Bold Text, все в пользовательском интерфейсе становится жирнее для лучшей читаемости. Обычный текст становится полужирным, полужирный — жирным, а жирный — черным (да, даже полужирный текст становится жирным!). Это также относится к таким вариантам, как курсив.

Как инженеры пользовательского интерфейса, мы должны учитывать эти предпочтения при создании интерфейсов. Если вы используете системный шрифт по умолчанию, то вам повезло — Apple уже позаботилась об этом! Но если вы используете пользовательский шрифт, то вам повезло, потому что вы нашли эту статью!

Вот код, на который мы ориентируемся:

Text("Lorem ipsum dolor sit amet.")
    .accessibilityFont(.body)

Прежде чем приступить к работе, стоит предупредить дизайнеров вашей команды о предпочтении Bold Text, поскольку им придется приобретать дополнительные веса по мере необходимости.

Сначала давайте создадим модель, в которой будут храниться данные о доступных шрифтах. Здесь мы определим обычный и полужирный варианты шрифта, между которыми можно будет переключаться.

struct AccessibleFont {
    var regular: Font
    var bold: Font

    init(_ regular: Font, bold: Font) {
        self.regular = regular
        self.bold = bold
    }

    func value(_ legibilityWeight: LegibilityWeight?) -> Font {
        switch legibilityWeight {
        case .bold:
            return bold
        default:
            return regular
        }
    }
}

Теперь, когда у нас есть модель для определения наших шрифтов, давайте создадим пример для нашего основного шрифта. Когда включено предпочтение Bold Text, мы должны использовать наш пользовательский полужирный шрифт; в противном случае мы должны использовать обычный шрифт.

extension AccessibleFont {
    static var body: AccessibleFont {
        AccessibleFont(
            regular: Font.custom("CustomFont-Regular", 17.0),
            bold: Font.custom("CustomFont-Bold", 17.0)
        )
    }
}

Далее мы определим модификатор представления (например, .font(_:)), который мы можем использовать в наших представлениях. Используя значение среды legibilityWeight, мы можем определить, каким должен быть истинный шрифт, исходя из предпочтений пользователя.

struct AccessibilityFontViewModifier: ViewModifier {
    @Environment(.legibilityWeight) private var legibilityWeight

    var font: AccessibleFont

    func body(content: Content) -> some View {
        content.font(font.value(legibilityWeight))
    }
}

Для удобства мы также включим удобную функцию .accessibilityFont(_:) в View.

extension View {
    func accessibilityFont(_ font: AccessibleFont) -> some View {        
        return self.modifier(AccessibilityFontViewModifier(font: font))
    }
}

Если мы соберем все это вместе, то получим наш исходный пример! Теперь, когда включено предпочтение Bold Text, SwiftUI будет отображать наш текст жирным в реальном времени.

Text("Lorem ipsum dolor sit amet.")
    .accessibilityFont(.body)

Полный текст — это всего лишь одно из предпочтений, которые пользователи могут включить для создания доступных возможностей. Независимо от того, что выбирает пользователь, будь то Bold Text или Invert Colors, мы, инженеры, должны работать над его поддержкой!