Показывать текст, только если загружено "font-family"

Question

Я хотел бы знать, возможно ли отображение текста только в том случае, если специальное «семейство шрифтов», примененное в этом тексте, было загружено.

Хотелось бы, если не загружается шрифт, не получается показывать текст.

CSS

@font-face {
    font-family: Moonogram;
    src: local(Moonogram),
         url('fonts/Moonogram.ttf') format("truetype");
}

.specialtext{
    font-family: 'Moonogram';
    font-size: 24px;
    font-weight: 100;
}

HTML

<p class="specialtext">This text</p>

Спасибо, что заранее

Answer 1

Предполагая, что я правильно понял ваш вопрос, вы хотите динамически скрыть / показать определенный фрагмент текста (но не весь) ... Из моего исследования невозможно определить, какие шрифты используются. Есть обходные пути, которые сравнивают размеры текста по высоте в соответствии с различными шрифтами, а затем предлагают шрифт, который может использовать. Тем не менее, я считаю это взломом, и это далеко не так.

Я могу предложить вам использовать систему на основе классов. Таким образом, ваш шрифт будет присвоен классу:

.specialFont {   
  font-family: "specialFont";
}

Текст должен иметь атрибут display:none; css в своем основном классе.

Тогда ваш специальный текст может иметь этот специальный класс ...

<p class="specialtext specialFont">This text</p>

Тогда вы можете определить, есть ли у него специальный класс шрифтов через jQuery ...

if ($('.specialtext').hasClass("specialFont")) {
  $(this).show();
}

На самом деле, вы можете сократить это до:

$('.specialtext.specialFont').show();