Codenameone CSS пользовательский шрифт требует времени для рендеринга - PullRequest
Новая
       6

Codenameone CSS пользовательский шрифт требует времени для рендеринга

2 голосов
/ 21 марта 2020

Я использовал пользовательский 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 Ответ

0 голосов
/ 21 марта 2020

Том Гуллен
Подождите, пока шрифты загрузятся, прежде чем отображать веб-страницу

Это зависит от поведения браузера.

Прежде всего, где объявлен ваш @font? Он встроен в ваш HTML, объявлен в листе CSS на странице или (надеюсь) объявлен во внешнем листе CSS?

Если его нет на внешнем листе, попробуйте переместить это к одному (обычно это лучше практиковать в любом случае).

Если это не помогает, вам нужно спросить себя, действительно ли доля второй разницы действительно наносит ущерб пользовательскому опыту? Если это так, то рассмотрите JavaScript, есть несколько вещей, которые вы могли бы сделать, перенаправления, паузы и т. Д. c, но на самом деле они могут быть хуже, чем исходная проблема. Хуже для пользователей и хуже в обслуживании.

Эта ссылка может помочь:

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

...