Решение проблемы отображения шрифта на canvas при первом запуске

Быстрый ответ

Для правильного отображения текста на элементе <canvas> с использованием шрифтов @font-face, сначала выполни загрузку шрифта через API FontFace. Добавь его в документ, а затем начни рисовать на холсте, но только после того, как шрифт полностью загрузится. Разберём этот процесс на конкретном примере:

const ctx = document.getElementById('canvas').getContext('2d');
const myFont = new FontFace('MyAwesomeFont', 'url(awesomefont.woff2)');

myFont.load().then(function(font) {
  // "Шрифт успешно загружен!"
  document.fonts.add(font);
  ctx.font = '20px MyAwesomeFont';
  ctx.fillText('Текст с пользовательским шрифтом', 10, 50);
}).catch(console.error);

Метод .load() обеспечивает предзагрузку шрифта, а document.fonts.add() делает его доступным для canvas. Это решает проблему первичного отображения.

Применение preload для гарантированной загрузки шрифта

Можно обеспечить предварительную загрузку шрифта до рисования текста на <canvas>, используя невидимый <div> с установленным font-family:

@font-face {
  font-family: 'MyAwesomeFont';
  src: url('awesomefont.woff2') format('woff2');
}

В HTML добавь следующее:

<div style="font-family: 'MyAwesomeFont'; opacity: 0; font-size: 0;">Предзагрузка</div>

Таким образом, ты, как бы, подсказываешь браузеру: "Вот этот шрифт. Загружай его быстрее!"

Основанная на событиях загрузка: танец двух шагов

Для контроля над загрузкой шрифтов на <canvas> используй такие инструменты, как загрузчик шрифтов от Google:

WebFont.load({
  custom: {
    families: ['MyAwesomeFont']
  },
  active: function() {
    drawCanvasText("И вот она, свобода слова.");
  }
});

function drawCanvasText(text) {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = '20px MyAwesomeFont';
  ctx.fillText(text, 10, 50);
}

Коллбэк active срабатывает, когда шрифт полностью загружен, то есть созданы все условия для отрисовки текста.

Обработка ошибок: ведь они всегда возможны

Даже с приложением всех усилий, нельзя быть полностью защищённым от ошибок. Для их избежания можно использовать элемент Image, который поможет обеспечить загрузку шрифта:

let fontLoader = new Image();
fontLoader.onerror = function() {
  // "Произошла ошибка, но я всё равно могу рисовать!"
  drawCanvasText();
};
fontLoader.src = 'awesomefont.woff2';

Ошибка возникнет, потому что браузер попытается загрузить файл шрифта как изображение. Используя это недоразумение в своих интересах, мы можем считать эту ошибку сигналом успешной обработки файла шрифта.

Визуализация

Рисование текста на холсте с помощью @font-face можно объяснить с использованием метафоры.

До загрузки шрифта:

Если скрипт будет выполнен, а шрифт ещё в процессе загрузки, то канвас не сможет его использовать. Это подобно тому, как выйти на сцену до знака:

[Первая Попытка 🎭]
Зрители: "Постойте, а где наш актёр?!"

После загрузки шрифта:

Как только шрифт станет доступен, текст на холсте будет отображен корректно, и вот ты уже звезда:

[Вторая Попытка 🎭✨]
Зрители: "Браво! Это достойно Оскара!"

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

Учитываем совместимость браузеров

API FontFace не поддерживается всеми браузерами. Важно проверять его поддержку, чтобы избежать ошибок и обеспечить стабильность восприятия пользователями:

if ('fonts' in document) {
  // "Смотри, мама, я могу без рук!"
  loadCustomFont();
} else {
  // "Альтернативные решения. Они как парашюты в мире программирования."
  fallBackStrategy();
}

Тестирование на разных браузерах дает гарантию одинакового восприятия твоего продукта на всех платформах.

Дьявол кроется в деталях: точное определение шрифтов

Тщательное описание параметров шрифта в правиле @font-face играет решающую роль для стабильного отображения:

@font-face {
  font-family: 'MyAwesomeFont';
  src: url('awesomefont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

Не забывай указывать все необходимые параметры, вроде font-family, font-style и font-weight, чтобы процесс работы с типографикой на холсте был действительно волшебным.

Полезные материалы

1. Canvas API – Web APIs | MDN — подробное описание Canvas API.
2. Используем @font-face в CSS | CSS-Tricks — пошаговое руководство по подключению пользовательских шрифтов через @font-face.
3. Типографические эффекты на канвасе | Статьи | web.dev — инструкции по созданию типографических эффектов на холсте.
4. HTML canvas font Property — краткий обзор свойства font для элемента canvas.
5. Создание веб-шрифтов с помощью @font-face на Font Squirrel — инструмент для создания собственных веб-шрифтов через @font-face.