如何使用 Jetpack Compose 将默认字体应用于应用程序中的所有 Text() 元素？

Question

我需要对整个应用程序中使用的所有 Text() 应用通用字体。目前，我正在使用如下样式或字体将其手动应用到每个文本。我如何将其指定为应用程序的全局主题？在正常的 xml 布局中，我使用自定义 TextView 小部件来实现此目的。

    Text(
            text = stringResource(id = R.string.userName),
            style = typography.h2,
            fontSize = 20.sp,
        )

Answer 1

您可以使用typography参数 inMaterialTheme来指定默认字体。

\n

在 Material2 中，您可以使用defaultFontFamily参数来指定默认字体，如 @Ajith 所示。但该参数在Material3（Material Design 3）中被删除。

\n

\n

注意：与 M2 Typography 类不同，M3 Typography 类当前不包含参数defaultFontFamily。您\xe2\x80\x99 将需要使用\nfontFamily每个单独 TextStyle 中的参数。\n(源)

\n

\n

但您可以对 Material3 执行以下操作。以下是在 M3 中设置默认字体系列的示例：

\n

// Type.kt\n\nimport androidx.compose.material3.Typography\nimport androidx.compose.ui.text.font.Font\nimport androidx.compose.ui.text.font.FontFamily\nimport androidx.compose.ui.text.font.FontStyle\nimport androidx.compose.ui.text.font.FontWeight\nimport com.example.exampleapp.R\n\n// Declare the font families\nobject AppFont {\n    val TitilliumWeb = FontFamily(\n        Font(R.font.titillium_web_regular),\n        Font(R.font.titillium_web_italic, style = FontStyle.Italic),\n        Font(R.font.titillium_web_medium, FontWeight.Medium),\n        Font(R.font.titillium_web_medium_italic, FontWeight.Medium, style = FontStyle.Italic),\n        Font(R.font.titillium_web_bold, FontWeight.Bold),\n        Font(R.font.titillium_web_bold_italic, FontWeight.Bold, style = FontStyle.Italic)\n    )\n}\n\nprivate val defaultTypography = Typography()\nval Typography = Typography(\n    displayLarge = defaultTypography.displayLarge.copy(fontFamily = AppFont.TitilliumWeb),\n    displayMedium = defaultTypography.displayMedium.copy(fontFamily = AppFont.TitilliumWeb),\n    displaySmall = defaultTypography.displaySmall.copy(fontFamily = AppFont.TitilliumWeb),\n\n    headlineLarge = defaultTypography.headlineLarge.copy(fontFamily = AppFont.TitilliumWeb),\n    headlineMedium = defaultTypography.headlineMedium.copy(fontFamily = AppFont.TitilliumWeb),\n    headlineSmall = defaultTypography.headlineSmall.copy(fontFamily = AppFont.TitilliumWeb),\n\n    titleLarge = defaultTypography.titleLarge.copy(fontFamily = AppFont.TitilliumWeb),\n    titleMedium = defaultTypography.titleMedium.copy(fontFamily = AppFont.TitilliumWeb),\n    titleSmall = defaultTypography.titleSmall.copy(fontFamily = AppFont.TitilliumWeb),\n\n    bodyLarge = defaultTypography.bodyLarge.copy(fontFamily = AppFont.TitilliumWeb),\n    bodyMedium = defaultTypography.bodyMedium.copy(fontFamily = AppFont.TitilliumWeb),\n    bodySmall = defaultTypography.bodySmall.copy(fontFamily = AppFont.TitilliumWeb),\n\n    labelLarge = defaultTypography.labelLarge.copy(fontFamily = AppFont.TitilliumWeb),\n    labelMedium = defaultTypography.labelMedium.copy(fontFamily = AppFont.TitilliumWeb),\n    labelSmall = defaultTypography.labelSmall.copy(fontFamily = AppFont.TitilliumWeb)\n)\n

\n

// Theme.kt\n\nimport androidx.compose.material3.MaterialTheme\nimport androidx.compose.runtime.Composable\n\n@Composable\nfun AppTheme(\n    content: @Composable () -> Unit\n) {\n    MaterialTheme(\n        typography = Typography,\n        content = content\n    )\n}\n

\n

单个组件的示例：

\n

import androidx.compose.material3.Text\nimport androidx.compose.runtime.Composable\nimport com.example.exampleapp.theme.AppFont\n\n@Composable\nfun ExampleScreen() {\n    Text(\n        text = "Hello World!", \n        fontFamily = AppFont.TitilliumWeb\n    )\n}\n

\n

Answer 2

Jetpack Compose 支持主题化，并且可以通过在应用程序主题中指定自定义字体来应用统一字体。执行此操作的步骤如下。

将自定义字体复制到 res/font 目录，例如：helvetica_nue.ttf

创建一个 Kotlin 文件 (Type.kt) 并在此处添加您的 Font 系列对象。指定 defaultFontFamily 作为您的自定义字体。如果您希望执行一些额外的自定义，您可以将样式添加到 body1 排版中，因为除非指定，否则这是所有 Text() 使用的默认排版。

private val myCustomFont = FontFamily(
    Font(R.font.helvetica_nue),
)


val Typography = Typography(
    defaultFontFamily = myCustomFont,
)

创建一个 Kotiln 文件（Theme.kt 或任何名称）并声明您的应用主题

@Composable
fun MyApplicationTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        typography = Typography,
    )
}

在您的活动/片段中，将应用程序的主要可组合项包装在此主题中

 MyApplicationTheme {
            NewsDetailScreen()
        }

现在，无论应用主题，您的应用程序都会以指定字体显示文本。

参考： https: //developer.android.com/jetpack/compose/themes/material#typography

如果要始终使用相同的字体，请指定 defaultFontFamily 参数并省略任何 TextStyle 元素的 fontFamily：