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

【问题标题】：How to load custom font with typesafe css?如何使用类型安全的 css 加载自定义字体？
【发布时间】：2017-07-20 22:43:43
【问题描述】：

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

【问题讨论】：

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

【解决方案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
        }
    }
}

【讨论】：

嗨，Edvin 和 Ruckus T-Boom，感谢您的快速帮助。它对我有用。使用 TornadoFx，您可以做出出色的工作。

【解决方案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
        }
    }
}

【讨论】：

谢谢。显然我从来没有回来修正我的答案，所以我就这么做了。