Избегайте бликов невидимого текста

Кэти Хемпениус
Katie Hempenius
X

В этой лабораторной работе с кодом показано, как немедленно отобразить текст с помощью Font Face Observer .

Добавить наблюдатель за шрифтом Face

Font Face Observer — это скрипт, который определяет загрузку шрифта. Файл fontfaceobserver.js уже сохранен в каталоге проекта, поэтому добавлять его отдельно не нужно. Однако вам необходимо добавить для него тег сценария.

  • Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.
  • Добавьте тег сценария для fontfaceobserver.js в index.html : 
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Используйте Font Face Observer

Создание наблюдателей

Создайте наблюдателя для каждого семейства шрифтов, которое оно используется на странице.

  • Добавьте следующий скрипт после скрипта fontfaceobserver.js . Это создаст наблюдателей для семейств шрифтов «Pacifico» и «Roboto»:
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

Если вы когда-либо не уверены, какие наблюдатели шрифтов вам нужно создать, просто найдите объявления font-family в своем CSS. Передайте имя font-family этих объявлений в FontFaceObserver() . Нет необходимости создавать обозреватель шрифтов для резервных шрифтов .

Например, если ваш CSS был:

font-family: "Times New Roman", Times, serif;

вы бы добавили FontFaceObserver('Times New Roman') . Times и serif являются резервными шрифтами, поэтому вам не нужно объявлять для них FontFaceObservers.

Определить загрузку шрифта

Код для обнаружения загрузки шрифта выглядит следующим образом:

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() — это обещание, которое выполняется при загрузке шрифта.

Демонстрационный сайт использует два разных шрифта, поэтому вам нужно использовать Promise.all() чтобы дождаться загрузки обоих шрифтов.

  • Добавьте это обещание в свой скрипт прямо под только что объявленными FontFaceObservers: 
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️Регистрация

Теперь ваш скрипт должен выглядеть так: 

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});
</script>

Применить класс fonts-loaded

  • Замените комментарий /* Do things */ в скрипте этой строкой:
document.documentElement.classList.add("fonts-loaded");

Это добавит класс fonts-loaded в корневой элемент документа (тег <html> ) после загрузки обоих шрифтов.

✔️Регистрация

Готовый сценарий должен выглядеть так: 

<script type="text/javascript">
  const pacificoObserver = new FontFaceObserver('Pacifico');
  const robotoObserver = new FontFaceObserver('Roboto');

  Promise.all([
    pacificoObserver.load(),
    robotoObserver.load()
  ]).then(function(){
    document.documentElement.className += " fonts-loaded";
  });
</script>

Обновить CSS

Ваша страница должна быть стилизована так, чтобы изначально использовать системный шрифт, а после применения класса fonts-loaded пользовательские шрифты.

  • Обновите CSS: 
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

Проверять

  • Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим полноэкранный .

Если страница выглядит так, значит, вы успешно внедрили Font Face Observer и избавились от «Мигания невидимого текста».

Заголовок написан курсивным шрифтом.