如何在Kotlin-Styled中引入Google Fonts外部字体以自定义文本组件样式？

云上老周

2026-4-29

在Kotlin Styled中引入Google Fonts的方法

我之前做Kotlin React项目时也碰到过这个问题，官方文档确实没专门提外部字体的处理，但其实利用kotlin-styled的特性就能轻松实现，给你分享两种可行的方案：

方案一：直接在HTML中引入字体链接（最简单）

这是最直接的方式，和传统前端项目一样，在你的index.html的<head>标签里添加Google Fonts的链接：

<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">

之后在任何kotlin-styled组件里，直接指定字体即可：

styledDiv {
    css {
        fontFamily = "'Nunito', sans-serif"
    }
    +"这是使用Nunito字体的文本"
}

方案二：用`injectGlobal`注入全局样式（纯Kotlin代码实现）

如果你不想修改HTML文件，想完全在Kotlin代码里处理，可以使用kotlin-styled提供的injectGlobal函数来注入全局的CSS规则，包括字体的@import：

// 可以放在App组件初始化的地方，或者全局的样式文件里
injectGlobal`
    @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
`

// 然后在自定义文本组件中使用
styledText {
    css {
        fontFamily = "'Nunito', sans-serif"
    }
    +"自定义文本组件的内容"
}