Работа со шрифтами

На этой странице описывается, как настроить шрифты в приложении Compose.

Установить шрифт

Text имеет параметр fontFamily , позволяющий задать шрифт, используемый в компоновке. По умолчанию включены семейства шрифтов serif, sans-serif, monospace и cursive: 

@Composable
fun DifferentFonts() {
    Column {
        Text("Hello World", fontFamily = FontFamily.Serif)
        Text("Hello World", fontFamily = FontFamily.SansSerif)
    }
}
TextSnippets.kt

Слова

Атрибут fontFamily можно использовать для работы с пользовательскими шрифтами и гарнитурами, определенными в папке res/font :

Графическое изображение папки res > font в среде разработки

В этом примере показано, как можно определить fontFamily на основе этих файлов шрифтов и с помощью функции Font : 

val firaSansFamily = FontFamily(
    Font(R.font.firasans_light, FontWeight.Light),
    Font(R.font.firasans_regular, FontWeight.Normal),
    Font(R.font.firasans_italic, FontWeight.Normal, FontStyle.Italic),
    Font(R.font.firasans_medium, FontWeight.Medium),
    Font(R.font.firasans_bold, FontWeight.Bold)
)
TextSnippets.kt

Вы можете передать этот fontFamily в ваш Text composable. Поскольку fontFamily может включать различные веса, вы можете вручную задать fontWeight , чтобы выбрать правильный вес для вашего текста: 

Column {
    Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Light)
    Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Normal)
    Text(
        text = "text",
        fontFamily = firaSansFamily,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Italic
    )
    Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Medium)
    Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Bold)
}
TextSnippets.kt

Слова

Чтобы узнать, как настроить типографику во всем приложении, см. раздел Пользовательские системы дизайна в Compose .

Загружаемые шрифты

Начиная с версии Compose 1.2.0 вы можете использовать API загружаемых шрифтов в своем приложении Compose для асинхронной загрузки шрифтов Google и использования их в своем приложении.

Поддержка загружаемых шрифтов, предоставляемых поставщиками, в настоящее время недоступна.

Используйте загружаемые шрифты программно

Чтобы загрузить шрифт программным способом из вашего приложения, выполните следующие действия:

  1. Добавьте зависимость:

    Круто 

    dependencies {
    ...
    implementation "androidx.compose.ui:ui-text-google-fonts:1.8.1"
}

    Котлин 

    dependencies {
    ...
    implementation("androidx.compose.ui:ui-text-google-fonts:1.8.1")
}
  2. Инициализируйте GoogleFont.Provider с учетными данными для Google Fonts:
    val provider = GoogleFont.Provider(
    providerAuthority = "com.google.android.gms.fonts",
    providerPackage = "com.google.android.gms",
    certificates = R.array.com_google_android_gms_fonts_certs
)
    TextDownloadableFontsSnippets.kt
     Параметры, которые получает поставщик:
    • Поставщик шрифтов для Google Fonts.
    • Пакет поставщика шрифтов для проверки личности поставщика.
    • Список наборов хэшей для сертификатов для проверки подлинности поставщика. Вы можете найти хэши, необходимые для поставщика Google Fonts, в файле font_certs.xml в образце приложения Jetchat.
  3. Определите семейство FontFamily :
    // ...
 import androidx.compose.ui.text.googlefonts.GoogleFont
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.googlefonts.Font
 // ...

val fontName = GoogleFont("Lobster Two")

val fontFamily = FontFamily(
    Font(googleFont = fontName, fontProvider = provider)
)
    TextDownloadableFontsSnippets.kt
     Вы можете запросить другие параметры шрифта, такие как насыщенность и стиль, с помощью FontWeight и FontStyle соответственно:
    // ...
 import androidx.compose.ui.text.googlefonts.GoogleFont
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.googlefonts.Font
 // ...

val fontName = GoogleFont("Lobster Two")

val fontFamily = FontFamily(
    Font(
        googleFont = fontName,
        fontProvider = provider,
        weight = FontWeight.Bold,
        style = FontStyle.Italic
    )
)
    TextDownloadableFontsSnippets.kt
  4. Настройте FontFamily , который будет использоваться в функции компоновки текста: 

Text(
    fontFamily = fontFamily, text = "Hello World!"
)
TextDownloadableFontsSnippets.kt

Вы также можете определить типографику для использования вашего FontFamily : 

val MyTypography = Typography(
    bodyMedium = TextStyle(
        fontFamily = fontFamily, fontWeight = FontWeight.Normal, fontSize = 12.sp/*...*/
    ),
    bodyLarge = TextStyle(
        fontFamily = fontFamily,
        fontWeight = FontWeight.Bold,
        letterSpacing = 2.sp,
        /*...*/
    ),
    headlineMedium = TextStyle(
        fontFamily = fontFamily, fontWeight = FontWeight.SemiBold/*...*/
    ),
    /*...*/
)
TextDownloadableFontsSnippets.kt

Затем настройте типографику в соответствии с темой вашего приложения: 

MyAppTheme(
    typography = MyTypography
)/*...*/
TextDownloadableFontsSnippets.kt

Пример приложения, реализующего загружаемые шрифты в Compose вместе с Material3 , см. в примере приложения Jetchat .

Добавить резервные шрифты

Вы можете определить цепочку откатов для вашего шрифта на случай, если шрифт не будет загружен должным образом. Например, если ваш загружаемый шрифт определен следующим образом: 

// ...
 import androidx.compose.ui.text.googlefonts.Font
 // ...

val fontName = GoogleFont("Lobster Two")

val fontFamily = FontFamily(
    Font(googleFont = fontName, fontProvider = provider),
    Font(googleFont = fontName, fontProvider = provider, weight = FontWeight.Bold)
)
TextDownloadableFontsSnippets.kt

Вы можете определить значения по умолчанию для вашего шрифта для обеих толщин следующим образом: 

// ...
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.googlefonts.Font
 // ...

val fontName = GoogleFont("Lobster Two")

val fontFamily = FontFamily(
    Font(googleFont = fontName, fontProvider = provider),
    Font(resId = R.font.my_font_regular),
    Font(googleFont = fontName, fontProvider = provider, weight = FontWeight.Bold),
    Font(resId = R.font.my_font_regular_bold, weight = FontWeight.Bold)
)
TextDownloadableFontsSnippets.kt

Убедитесь, что вы добавляете правильные импорты.

Определение FontFamily таким образом создает FontFamily , содержащий две цепочки, по одной на каждый вес. Механизм загрузки сначала попытается разрешить онлайн-шрифт, а затем шрифт, расположенный в локальной папке ресурсов R.font .

Отладка вашей реализации

Чтобы помочь вам проверить, правильно ли загружается шрифт, вы можете определить обработчик сопрограммы отладки. Ваш обработчик обеспечивает поведение того, что делать в случае, если шрифт не загружается асинхронно.

Начнем с создания CoroutineExceptionHandler : 

val handler = CoroutineExceptionHandler { _, throwable ->
    // process the Throwable
    Log.e(TAG, "There has been an issue: ", throwable)
}
TextDownloadableFontsSnippets.kt

Передайте его методу createFontFamilyResolver , чтобы преобразователь использовал новый обработчик: 

CompositionLocalProvider(
    LocalFontFamilyResolver provides createFontFamilyResolver(LocalContext.current, handler)
) {
    Column {
        Text(
            text = "Hello World!", style = MaterialTheme.typography.bodyMedium
        )
    }
}
TextDownloadableFontsSnippets.kt

Вы также можете использовать API isAvailableOnDevice от поставщика, чтобы проверить, доступен ли поставщик и правильно ли настроены сертификаты. Для этого вы можете вызвать метод isAvailableOnDevice , который возвращает false, если поставщик настроен неправильно. 

val context = LocalContext.current
LaunchedEffect(Unit) {
    if (provider.isAvailableOnDevice(context)) {
        Log.d(TAG, "Success!")
    }
}
TextDownloadableFontsSnippets.kt

Предостережения

Google Fonts требуется несколько месяцев, чтобы сделать новые шрифты доступными на Android. Существует разрыв во времени между тем, когда шрифт добавляется на fonts.google.com , и тем, когда он становится доступен через API загружаемых шрифтов (либо в системе View, либо в Compose). Недавно добавленные шрифты могут не загружаться в вашем приложении с IllegalStateException . Чтобы помочь разработчикам идентифицировать эту ошибку среди других типов ошибок загрузки шрифтов, мы добавили описательное сообщение для исключения в Compose с изменениями здесь . Если вы обнаружите какие-либо проблемы, сообщите о них с помощью трекера проблем .

Используйте переменные шрифты

Вариативный шрифт — это формат шрифта, который позволяет одному файлу шрифта содержать различные стили. С вариативными шрифтами вы можете изменять оси (или параметры) для создания предпочитаемого вами стиля. Эти оси могут быть стандартными, такими как вес, ширина, наклон и курсив, или пользовательскими, которые различаются в разных вариативных шрифтах.

Пять конфигураций одного и того же вариативного шрифта с разными значениями осей.
Рисунок 1. Текст, использующий тот же переменный шрифт, настроенный с разными значениями осей.

Использование переменных шрифтов вместо обычных файлов шрифтов позволяет иметь только один файл шрифта вместо нескольких.

Дополнительную информацию о вариативных шрифтах можно найти в базе знаний Google Fonts , где представлен полный каталог доступных вариативных шрифтов и таблица поддерживаемых осей для каждого шрифта.

В этом документе показано, как реализовать переменный шрифт в приложении Compose.

Загрузить переменный шрифт

  1. Загрузите вариативный шрифт, который вы хотите использовать (например, Roboto Flex ), и поместите его в папку app/res/font в вашем приложении. Убедитесь, что добавляемый вами файл . ttf является версией вариативного шрифта шрифта, и что имя файла шрифта полностью состоит из строчных букв и не содержит никаких специальных символов.

  2. Чтобы загрузить переменный шрифт, определите FontFamily используя шрифт, размещенный в каталоге res/font/ : 

    // In Typography.kt
@OptIn(ExperimentalTextApi::class)
val displayLargeFontFamily =
    FontFamily(
        Font(
            R.font.robotoflex_variable,
            variationSettings = FontVariation.Settings(
                FontVariation.weight(950),
                FontVariation.width(30f),
                FontVariation.slant(-6f),
            )
        )
    )
    VariableFontsSnippets.kt

    API FontVariation позволяет вам настраивать стандартные оси шрифта, такие как weight , width и slant . Это стандартные оси, доступные для любого вариативного шрифта. Вы можете создавать различные конфигурации шрифта в зависимости от того, где он будет использоваться.

  3. Вариативные шрифты доступны только для Android версии O и выше, поэтому добавьте ограничение и настройте соответствующий резервный вариант: 

    // In Typography.kt
val default = FontFamily(
    /*
    * This can be any font that makes sense
    */
    Font(
        R.font.robotoflex_static_regular
    )
)
@OptIn(ExperimentalTextApi::class)
val displayLargeFontFamily = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    FontFamily(
        Font(
            R.font.robotoflex_variable,
            variationSettings = FontVariation.Settings(
                FontVariation.weight(950),
                FontVariation.width(30f),
                FontVariation.slant(-6f),
            )
        )
    )
} else {
    default
}
    VariableFontsSnippets.kt

  4. Извлеките настройки в набор констант для более простого повторного использования и замените настройки шрифта этими константами: 

    // VariableFontDimension.kt
object DisplayLargeVFConfig {
    const val WEIGHT = 950
    const val WIDTH = 30f
    const val SLANT = -6f
    const val ASCENDER_HEIGHT = 800f
    const val COUNTER_WIDTH = 500
}

@OptIn(ExperimentalTextApi::class)
val displayLargeFontFamily = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    FontFamily(
        Font(
            R.font.robotoflex_variable,
            variationSettings = FontVariation.Settings(
                FontVariation.weight(DisplayLargeVFConfig.WEIGHT),
                FontVariation.width(DisplayLargeVFConfig.WIDTH),
                FontVariation.slant(DisplayLargeVFConfig.SLANT),
            )
        )
    )
} else {
    default
}
    VariableFontsSnippets.kt

  5. Настройте типографику Material Design 3 для использования FontFamily : 

    // Type.kt
val Typography = Typography(
    displayLarge = TextStyle(
        fontFamily = displayLargeFontFamily,
        fontSize = 50.sp,
        lineHeight = 64.sp,
        letterSpacing = 0.sp,
        /***/
    )
)
    VariableFontsSnippets.kt

    В этом примере используется типографика displayLarge Material 3, которая имеет другие настройки шрифта по умолчанию и рекомендуемые применения. Например, displayLarge следует использовать для короткого, важного текста, так как это самый большой текст на экране.

    С Material 3 вы можете изменить значения по умолчанию TextStyle и fontFamily , чтобы настроить типографику. В приведенном выше фрагменте вы настраиваете экземпляры TextStyle , чтобы настроить параметры шрифта для каждого семейства шрифтов.

  6. Теперь, когда вы определили свою типографику, передайте ее в M3 MaterialTheme : 

    MaterialTheme(
    colorScheme = MaterialTheme.colorScheme,
    typography = Typography,
    content = content
)
    VariableFontsSnippets.kt

  7. Наконец, используйте компонуемый Text и укажите стиль одного из определенных стилей типографики, MaterialTheme.typography.displayLarge : 

    @Composable
@Preview
fun CardDetails() {
    MyCustomTheme {
        Card(
            shape = RoundedCornerShape(8.dp),
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            Column(
                modifier = Modifier.padding(16.dp)
            ) {
                Text(
                    text = "Compose",
                    style = MaterialTheme.typography.displayLarge,
                    modifier = Modifier.padding(bottom = 8.dp),
                    maxLines = 1
                )
                Text(
                    text = "Beautiful UIs on Android",
                    style = MaterialTheme.typography.headlineMedium,
                    modifier = Modifier.padding(bottom = 8.dp),
                    maxLines = 2
                )
                Text(
                    text = "Jetpack Compose is Android’s recommended modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.",
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(bottom = 8.dp),
                    maxLines = 3
                )
            }
        }
    }
}
    VariableFontsSnippets.kt

    Каждый Text компоновщик настраивается через стиль своей темы Material и содержит различную конфигурацию переменного шрифта. Вы можете использовать MaterialTheme.typography для получения типографики, предоставленной компоновщику M3 MaterialTheme .

Три разных текста, в каждом из которых использованы разные конфигурации шрифтов.
Рисунок 2. Вариативный шрифт, применяемый в трех различных конфигурациях.

Использовать пользовательские оси

Шрифты также могут иметь пользовательские оси. Они определяются в самом файле шрифта. Например, шрифт Roboto Flex имеет ось высоты надстрочных элементов ( "YTAS" ), которая регулирует высоту строчных надстрочных элементов, в то время как ширина контрэлемента ( "XTRA" ) регулирует ширину каждой буквы.

Вы можете изменить значение этих осей с помощью настроек FontVariation .

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

  1. Чтобы использовать пользовательские оси, определите функции для пользовательских осей ascenderHeight и counterWidth : 

    fun ascenderHeight(ascenderHeight: Float): FontVariation.Setting {
    require(ascenderHeight in 649f..854f) { "'Ascender Height' must be in 649f..854f" }
    return FontVariation.Setting("YTAS", ascenderHeight)
}

fun counterWidth(counterWidth: Int): FontVariation.Setting {
    require(counterWidth in 323..603) { "'Counter width' must be in 323..603" }
    return FontVariation.Setting("XTRA", counterWidth.toFloat())
}
    VariableFontsSnippets.kt

    Эти функции выполняют следующие действия:

    • Определите ограничения для значений, которые они могут принять. Как вы можете видеть в каталоге Variable fonts , ascenderHeight (YTAS) имеет минимальное значение 649f и максимальное значение 854f .
    • Верните настройку шрифта, чтобы конфигурация была готова к добавлению к шрифту. В методе FontVariation.Setting() имя оси ( YTAS, XTRA ) жестко закодировано, и оно принимает значение в качестве параметра.

  2. Используя оси с конфигурацией шрифта, передайте дополнительные параметры каждому загруженному Font : 

    @OptIn(ExperimentalTextApi::class)
val displayLargeFontFamily = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    FontFamily(
        Font(
            R.font.robotoflex_variable,
            variationSettings = FontVariation.Settings(
                FontVariation.weight(DisplayLargeVFConfig.WEIGHT),
                FontVariation.width(DisplayLargeVFConfig.WIDTH),
                FontVariation.slant(DisplayLargeVFConfig.SLANT),
                ascenderHeight(DisplayLargeVFConfig.ASCENDER_HEIGHT),
                counterWidth(DisplayLargeVFConfig.COUNTER_WIDTH)
            )
        )
    )
} else {
    default
}
    VariableFontsSnippets.kt

    Обратите внимание, что высота строчных выносных элементов теперь увеличена, а остальной текст стал шире:

Три разных текста, демонстрирующих разные конфигурации для переменных шрифтов с установленными пользовательскими осями — некоторые имеют более высокие строчные выносные элементы и шире, чем раньше.
Рисунок 3. Текст, показывающий пользовательские оси, установленные на переменных шрифтах.

Дополнительные ресурсы

Более подробную информацию можно найти в следующей записи блога о вариативных шрифтах:

{% дословно %} {% endverbatim %} {% дословно %} {% endverbatim %}