WebFontLoader: Почему декларация семейства шрифтов vanilla недостаточна для резервирования?

Мне нравится использовать WebFontLoader для загрузки шрифтов. Это быстрое решение, которое хорошо сработало для меня. Я обычно использую это асинхронно, помещая что-то вроде этого на своей странице <head>:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" async></script>

WebFontConfig = {
  google: {
    families: ['Droid Sans', 'Droid Serif']
  }
};

Затем в моем CSS я сделаю что-то вроде этого:

h1 {
  font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
}

В последнее время я читал о WebFontLoader, и большинство примеров, которые я вижу (вот одна статья об этом), вместо этого делают что-то подобное, используя классы, которые WFL применяет к <html> элемент, чтобы определить, загружен ли шрифт и готов ли он к использованию:

h1 {
  font-family: Helvetica, Arial, sans-serif;

  .wf-active & {
    font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
  }
}

Мой вопрос: почему недостаточно декларировать обычный стек шрифтов с резервными копиями системы? Разве смысл семейства шрифтов не в том, что, если первый не распознается, он автоматически откроется другим?

Если браузеры увидят, что первый шрифт в стеке не системный, будет ли он по умолчанию скрывать этот элемент, несмотря на наличие резервных копий - или что-то в этом роде?

Источник

1 ответ

Решение

Почему недостаточно декларировать обычный стек шрифтов с резервными копиями системы?

Достаточно, если все, что вы хотите сделать, это использовать ваши шрифты, как только они будут доступны. Но, возможно, вы захотите сделать больше, как только вам гарантируют, что ваши шрифты готовы к использованию, и в этом случае использование класса CSS помогает делать гораздо более мощные вещи. Таким образом, большинство примеров покажет вам "более мощную" версию, а не ограниченный вариант использования: использование класса на <html> Элемент позволяет вам запускать любые функции и рестайлинг, которые вы можете использовать, когда веб-шрифты готовы.

Например, вы можете использовать его в качестве переключателя, чтобы отключить диалоговое окно, которое должно отображаться только до тех пор, пока ваши веб-шрифты не готовы. Например::

<html>
  ...
  <div class="font-loading">Please wait while the fonts load.</div>
  ...
</html>

с некоторой формой CSS, которая делает

.font-loading {
  background: red;
  color: white;
  border: 1px solid black;
  opacity: 1;
  height: 4em;
  transition: opacity 1s ease-in, height 1s ease-in;
}

.wf-active .font-loading {
  opacity: 0;
  height: 0;
}

Имея это wf-active класс добавлен в <html> Элемент явно дает всей вашей странице сигнал, который можно использовать для "выполнения действий, которые должны произойти, когда все мои веб-шрифты готовы к использованию", что сильно отличается от простого "использования шрифтов, когда они будут готовы".

Источник
Другие вопросы по тегам