4

В коде ниже, во время загрузки страницы вместо "u" генерируется знак рубля "₽" с нужными стилями. "u"  здесь выступает в качестве заглушки и без нее, к сожалению никак.

<span class="ruble">u</span>
.ruble {
    font-family: 'Conv_rouble' !important;
    font-weight: normal !important;
}

Проблема в том, что при медленном интернете во время загрузки страницы можно увидеть эту "u" буквально на 1-2 секунды. Заказчик просит это исправить...
Подставить вместо "u" сам знак ₽ не прокатит, в этом случае шрифт 'Conv_rouble' не сработает :)
(пробел тоже).
Кучу вариантов потыкал в коде, так ниче и не работает(.

Решал похожую проблему во Vue, нужно было скрыть появление vue-переменных. Но там это легко решается через v-cloak. Здесь же нужно сделать тоже самое, только с css..

Хотелось бы решение что-то типа скрыть элемент, пока не сработает шрифт, скорее это как-то через js нужно сделать. Но я вообще уже не понимаю как. Если кто-то сталкивался с подобным или есть идеи, буду рад почитать)

2
  • 9
    Если шрифт загружается через css, то можно попробовать установить значение font-display block. Если через link, тогда можно слушать onload на ссылке, и скрывать/показывать u
    – Anynomius
    10 июл 2021 в 23:30
  • 1
    @Anynomius , ДА!!! font-display: block сработало!!! СПАСИБО БОЛЬШОЕ! Я столько часов на это потратил, а Вы одним советом решили задачу! Золотой Вы человек!)) 10 июл 2021 в 23:40

1 ответ 1

0

html:

<span class="ruble none">u</span>

css:

.ruble{
    font-family: 'Conv_rouble' !important;
    font-weight: normal !important;
}
.none{
    display: none;
}

js:

$(document).ready(function () {
   let ruble = document.getElementsByClassName('ruble')
   ruble.classList.remove("none");
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.