Codenameone CSS自定义字体需要时间来呈现。

Question

通过执行以下操作，我使用了自定义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"

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

它首先在中呈现默认字体，然后在此之后更改为新字体。

​

在呈现组件之前加载字体的正确方法是什么，这样我们就不会看到这个闪烁？

Answer 1

Tom Gullen

Wait for fonts to load before rendering web page

这取决于浏览器的行为。

首先，您的@字体声明在哪里？它是内联的HTML，在页面上的CSS表中声明的，还是(希望)在外部CSS表中声明的？

如果它不在外部工作表中，请尝试将其移动到一个(这通常是更好的实践)。

如果这没有帮助，你需要问问自己，第二次差别的分数对用户体验真的有很大的危害吗？如果是的话，那么考虑一下JavaScript，您可能可以做一些事情，重定向、暂停等等，但是这些事情实际上可能比原来的问题更糟糕。对用户来说更糟，维护更糟。

这一链接可能有助于：

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