css - 如何使用类型安全的 css 加载自定义字体？

Question

我想用 typesafe css 在 tornadofx-app 中加载自定义字体，这可能吗？谢谢和最好的问候。

Answer 1

只要加载了字体，就可以在 CSS 中使用它，所以我们loadFont在 TornadoFX 中添加了一个帮助器，可以像这样使用：

class FontTest : App(Main::class, Styles::class)

class Main : View("Font Test") {
    override val root = stackpane {
        label("This is my Label") {
            addClass(Styles.custom)
        }
    }
}

class Styles : Stylesheet() {
    companion object {
        val custom by cssclass()
        // Note that loadFont() returns Font?
        val riesling = loadFont("/fonts/riesling.ttf", 48.0)
    }

    init {
        custom {
            padding = box(25.px)
            riesling?.let { font = it }
            // or if you just want to set the font family:
            // riesling?.let { fontFamily = it.family }
        }
    }
}

如果您确定字体存在（例如，您正在构建中），则可以简化为：

class Styles : Stylesheet() {
    companion object {
        val custom by cssclass()
        val riesling = loadFont("/fonts/riesling.ttf", 48.0)!!
    }
    
    init {
        custom {
            padding = box(25.px)

            font = riesling
            // or if you just want to set the font family:
            // fontFamily = riesling.family
        }
    }
}

Answer 2

顺便说一句，自从Ruckus T-Boom回答这个问题 29 天以来，他添加了loadFont函数 :) ，用它可以写：

class Styles : Stylesheet() {
    private val customFont = loadFont("/fonts/custom-font.ttf", 14)!!

    init {
        root {
            font = customFont
            fontSize = 11.px
        }
    }
}