如何使用TypeSafe CSS加载自定义字体？

Question

我想在使用typesafe css的tornadofx应用程序中加载自定义字体，这是否可能？ 谢谢并致以最好的问候。

- thlinde

---

你好！目前还没有针对@font-face规则的特殊支持，但我们正在努力解决。现在，您可以覆盖样式表的render()函数并添加"@font-face { ... }" + super.render()。我们会尽快提供更好的解决方案 :) - Edvin Syse

Answer 1

只要加载了字体，就可以在CSS中使用，因此我们在TornadoFX中添加了一个loadFont助手程序，可按如下方式使用：

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
        }
    }
}

- Ruckus T-Boom

---

嗨，Edvin和Ruckus T-Boom，感谢你们的快速帮助。对我来说效果很好。你们在TornadoFx方面做得非常棒。 - thlinde

Answer 2

顺便提一下，自从29天前Ruckus T-Boom回答了这个问题，他添加了loadFont函数:), 可以写成：

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

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

- Victor

---

谢谢。显然我从未回来修正我的答案，所以我刚刚做了。 - Ruckus T-Boom