在 Jetpack Compose 中，如何应用存储在 Assets 中的字体/字体？

Question

在 Jetpack compose 中，文档建议使用

font-family

属性应用字体并引用存储在

res/fonts

文件夹中的字体文件。是否也可以使用存储在

assets/

下的字体文件？

Answer 1

是的，有一个默认方法，它以

AssetManager

作为参数：

/**
 * Create a Font declaration from a file in the assets directory. The content of the [File] is
 * read during construction.
 *
 * @param assetManager Android AssetManager
 * @param path full path starting from the assets directory (i.e. dir/myfont.ttf for
 * assets/dir/myfont.ttf).
 * @param weight The weight of the font. The system uses this to match a font to a font request
 * that is given in a [androidx.compose.ui.text.SpanStyle].
 * @param style The style of the font, normal or italic. The system uses this to match a font to a
 * font request that is given in a [androidx.compose.ui.text.SpanStyle].
 */
@ExperimentalTextApi
@OptIn(InternalPlatformTextApi::class, ExperimentalTextApi::class)
@Stable
fun Font(
    assetManager: AssetManager,
    path: String,
    weight: FontWeight = FontWeight.Normal,
    style: FontStyle = FontStyle.Normal
): Font = AndroidAssetFont(assetManager, path, weight, style)

现在访问这样的字体！

@OptIn(ExperimentalTextApi::class)
@Composable
fun fontFamily() = FontFamily(
    Font(LocalContext.current.assets,"myfont.ttf")
)

@Composable
fun typography() = Typography(

    h1 = TextStyle(
        fontFamily = fontFamily(),
        fontWeight = FontWeight.Bold,
        fontSize = 30.sp
    )
)

Answer 2

1. 在res中创建字体目录（res/font）

2. 将 .ttf 字体复制到 res/font 中

3. 找到Type.kt文件（在ui/theme目录下）

4. 在 Type.kt 中为字体创建一个变量

   val MyCustomFont = FontFamily(
       Font(R.font.regular),
       Font(R.font.bold,FontWeight.Bold)
   )
   

5. Type.kt 文件中有 Typography val，您可以通过将 defaultFontFamily = MyCustomFont 放入此 val 来更改整个应用程序的字体系列

   val Typography = Typography(
       defaultFontFamily = MyCustomFont,
       body1 = TextStyle(
           fontFamily = MyCustomFont2,
           fontWeight = FontWeight.Normal,
           fontSize = 16.sp
    ),
   

6. 您可以将字体系列设置为特定的排版，例如 body1、h1、h2、...

编辑：要更改 Material 3 的字体，请在 Type.kt 中添加以下内容

bodyLarge = TextStyle(
    fontFamily = MyCustomFont,
    fontWeight = FontWeight.Normal,
    fontSize = 16.sp,
    lineHeight = 24.sp,
    letterSpacing = 0.5.sp
),
displayLarge= TextStyle(fontFamily = MyCustomFont),
displayMedium= TextStyle(fontFamily = MyCustomFont),
displaySmall= TextStyle(fontFamily = MyCustomFont),
headlineLarge= TextStyle(fontFamily = MyCustomFont),
headlineMedium= TextStyle(fontFamily = MyCustomFont),
headlineSmall= TextStyle(fontFamily = MyCustomFont),
titleLarge= TextStyle(fontFamily = MyCustomFont),
titleMedium= TextStyle(fontFamily = MyCustomFont),
titleSmall= TextStyle(fontFamily = MyCustomFont),
bodyMedium= TextStyle(fontFamily = MyCustomFont),
bodySmall= TextStyle(fontFamily = MyCustomFont),
labelLarge= TextStyle(fontFamily = MyCustomFont),
labelMedium= TextStyle(fontFamily = MyCustomFont),
labelSmall= TextStyle(fontFamily = MyCustomFont),

Answer 3

实际上在 compose 中，通常有一个名为 Typography.kt 的类，由

MaterialTheme

Composable 使用。如主题 Codelab 中所述，正确的方法是修改此类以向其中添加您的字体。实际上，您可以创建自己的

mAppTheme

来覆盖材质的。

https://youtu.be/DDd6IOlH3io?t=6m27s

该视频展示了如何实现自定义调色板，但也可以采用类似的方法来实现自定义排版。

检查 JetSnack 示例应用程序 https://github.com/android/compose-samples

Answer 4

适用于 Compose Multiplatform 版本 1.7.0（桌面 + Android）。

将此依赖项添加到您的公共源集：

implementation(compose.components.resources)

将字体文件放入

src/commonMain/composeResources/font/

，然后像这样访问它们：

val myFont = Font(Res.font.roboto) // roboto is the name of the font file