Codenameone CSS 自定义字体需要时间来渲染答案

【问题标题】：Codenameone CSS custom font takes time to renderCodenameone CSS 自定义字体需要时间来渲染
【发布时间】：2020-07-02 04:40:12
【问题描述】：

我通过执行以下操作来使用 自定义 CSS 字体：

@font-face {
    font-family: "airborne";
    src: url(fonts/Airborne.ttf);
}

:root {
   --styled-text: "airborne";
 }

PillButtonText{
    color: white;
    font-size: 10pt;
    font-weight: bold;
    font-family: var(--styled-text);
}


val bookTableButton = Label("Book a table".toUpperCase())
bookTableButton.uiid = "PillButtonText"

显示自定义字体，但有一些警告。

它首先呈现默认字体然后它会更改为新字体。

在渲染组件之前加载字体以便我们看不到这种闪烁的正确方法是什么？

【问题讨论】：

尝试将字体平等地应用于所有 UIID 状态。我猜按钮在选定/未选定状态之间转换。字体在启动时加载

标签： java css kotlin codenameone

【解决方案1】：

Tom Gullen
Wait for fonts to load before rendering web page

这取决于浏览器的行为方式。

首先你的@font 声明在哪里？它是嵌入到您的 HTML 中，在页面上的 CSS 表中声明，还是（希望）在外部 CSS 表中声明？

如果它不在外部工作表中，请尝试将其移至一张（这通常是更好的做法）。

如果这没有帮助，您需要问问自己，秒差的一小部分是否真的对用户体验有很大的不利影响？如果是，那么请考虑 JavaScript，您可能可以做一些事情，重定向、暂停等，但这些实际上可能比最初的问题更糟糕。对用户来说更糟，维护也更糟。

此链接可能会有所帮助：

http://paulirish.com/2009/fighting-the-font-face-fout/

【讨论】：