如何在 Jetpack Compose for Desktop 中使用字体？

Question

我正在尝试使用 JetBrains Compose for Desktop 中

src/main/resources/fonts/

中放置的一些字体 ttf 文件。如何在

androidx.compose.ui.text.font.Font()

功能中使用字体文件？我尝试过使用很多网上文章中提到的

R.fonts.font_file

，但似乎它只适用于Android。

我知道有这个。他面临着我在这里遇到的完全相同的问题。我已经尝试过这个。不幸的是，它没有起作用。我上面链接的问题中的唯一答案是解决方案是将字体文件放入

src/main/resources

并使用：

Font(
    resource = "font.ttf",
    weight = FontWeight.W400,
    style = FontStyle.Normal,
)

但这不起作用。我机器上的

androidx.compose.ui.text.font.Font()

功能需要 3 个参数，

resId

、

weight

和

style

。

public fun Font(
    resId: Int,
    weight: FontWeight,
    style: FontStyle,
)

（从创意工具提示复制）

如您所见，它需要一个

resId

：Int。我应该如何在 Int 中指定它？

由于 JetBrains Compose for Desktop 仍处于早期测试阶段，我在网络上能找到的资源非常稀缺。我尝试搜索“kotlin资源id”来找到将字体文件作为ID引用的方法，但我能找到的都是真正针对Android的东西。我还尝试搜索“jetpack compose 桌面字体”和“jetbrains compose 字体”，我得到的结果也充斥着 Android 的东西。是的，我尝试在搜索查询中使用“-android”，但结果中剩下的所有内容都无关紧要。我链接的问题是我能找到的关于 Jetpack Compose for Desktop 字体的唯一问题。

这是我的大部分项目结构。

这是当我将鼠标悬停在 Font() 上时 IntelliJ Idea 显示的

工具提示

。没那么有用吧？

Kotlin 版本：1.5.10
Jetpack compose 版本：0.5.0-build225（最新预发布） 顺便说一句，如果有必要的话，我正在 MacBook 上使用 Manjaro Linux。

Answer 1

您不能为此使用

androidx.compose.ui.text.font.Font

。改为导入

androidx.compose.ui.text.platform.Font

。

也许与直觉相反，

androidx.compose.ui.text.platform.Font

是

androidx.compose.ui.text.font.FontFamily

中的有效参数类型，并且支持

resource

、

weight

和

style

。

Answer 2

这就是我使用“jost_regular.ttf”的方式。

1. 将

   jost_regular.ttf

   放入

   jvmMain/resources/font/

   文件夹中。
2. 在

   Theme.kt

   ：

package jetbrains.compose.calculator.resources

import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.platform.Font

...

val jostFontFamily = FontFamily(
    fonts = listOf(
        Font(
            resource = "font/jost_regular.ttf",
            weight = FontWeight.W400,
            style = FontStyle.Normal
        )
    )
)

3. 用途：

    Text(
        text = mainOutput.value .text,
        style = TextStyle(
            fontSize = 48.sp,
            fontFamily = jetbrains.compose.calculator.resources.jostFontFamily
        ),
        overflow = TextOverflow.Ellipsis,
        softWrap = false,
        maxLines = 1,
    )

Answer 3

使用 CMP 1.7.0 执行以下操作：

1. 添加资源库：

   implementation(compose.components.resources)

2. 将 .ttf 或 .otf 字体文件放入 src/commonMain/composeResources/font/
3. 使用

   Res.font.

   font_name

   
   访问字体 例如：

   val myFont = Font(Res.font.roboto)

有关更多详细信息，请参阅文档。