代码之家  ›  专栏  ›  技术社区  ›  erluxman

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

  •  0
  • erluxman  · 技术社区  · 6 年前

    自定义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"
    

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

    起初 然后它会变成新的字体 之后。

    enter image description here

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

    1 回复  |  直到 6 年前
        1
  •  0
  •   Romer    6 年前

    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/