Использование пользовательских шрифтов в HTML5 Canvas

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

Для использования собственного шрифта следует сначала задать его в CSS, применив правило @font-face. Затем, обязательно выполните предзагрузку шрифта с помощью document.fonts.load прежде чем начать его использовать. Для вывода текста на холст используйте методы fillText или strokeText.

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

document.fonts.load('10pt CustomFont').then(() => {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = '20px CustomFont';
  ctx.fillText('Текст на холсте', x, y);
});

Учтите, что ссылка в url должна совпадать с местоположением вашего файла шрифта, а CustomFont — с его названием. Переменные x и y указывают позицию текста на холсте.

Проверка совместимости: Поддержка разными браузерами

Обеспечение доступности шрифтов для всех браузеров

Для обеспечения корректного отображения текста во всех браузерах рекомендуется указать несколько форматов файлов шрифтов, используя url и format внутри @font-face.

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
}

Подробнее об этом расскажет наш спикер на видео

Разъяснение форматов шрифтов

• .woff2 — предпочтительный формат для современных браузеров с наилучшей степенью сжатия.
• .woff — запасной формат для более старых версий браузеров.
• .ttf или .otf — редко используемые форматы, поскольку их размеры больше, и они менее адаптированы для веба.

Расширенное управление текстом: Мастерство работы с текстом

Когда простого текста не достаточно

Задачи, связанные с переносом текста или измерением его параметров, требуют применения дополнительных библиотек, таких как fabric.js или opentype.js, обеспечивающих расширенные возможности работы с текстом.

Тайное оружие холста: контейнерные div'ы

При работе с несколькими элементами canvas, рекомендуется использовать контейнерные divы для упрощения позиционирования и обеспечения адаптивности.

Предварительная подготовка перед выводом текста на холст

Предзагрузка шрифтов: Готовимся заранее

Предварительно загружайте шрифты с помощью document.fonts.load, чтобы улучшить быстродействие при работе с текстом на холсте.

Определение свойств шрифта в CSS

В CSS возможно дополнительно задать свойства шрифтов, например font-weight и font-style, которые должны соответствовать параметрам ваших файлов шрифтов.

@font-face {
  font-family: 'CustomFont';
  src: url('font-bold.woff2') format('woff2');
  font-weight: bold;
}

Атрибут cross-origin: учимся уважительно обращаться с ресурсами других доменов

При подключении шрифтов с внешних доменов используйте атрибут crossorigin.

<link href="http://example.com/font.woff2" rel="stylesheet" crossorigin="anonymous">

Одно имя, разные варианты

При отображении текста убедитесь, что значение font-family в CSS и имя шрифта, используемое в font при работе с Canvas, совпадают.

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

Применение пользовательских шрифтов в HTML5 Canvas можно сравнить с выбором одежды для важного мероприятия.

"Привет, холст!" может выглядеть как:

1. Arial, представляющий собой стандартный деловой костюм 👔
2. 'FancyFont', который будет аналогом торжественного смокинга или вечернего платья 🎩

Делаем текст красивым:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '48px FancyFont'; // Стилизуем текст в 'FancyFont' для праздника

ctx.fillText('Привет, холст!', 10, 50); // Время для увлекательных танцев!

Не забывайте о необходимости предзагрузки шрифта перед "выступлением".

Работа с несколькими холстами

Учет времени загрузки шрифтов

Чтобы избежать задержек при загрузке шрифтов, используйте document.fonts.ready или отложите операции с холстом до завершения загрузки шрифтов.

Четкость текста на Retina-дисплеях

Учтите, что для Retina-дисплеев необходимо корректно масштабировать ваш холст, чтобы текст отображался четко.

let ratio = window.devicePixelRatio;
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;

ctx.scale(ratio, ratio); // Увеличиваем плотность пикселей

Динамические тексты в играх

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

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

1. Рисование текста – Web API | MDN — Гид по работе с текстом на холсте HTML5.
2. Использование @font-face в CSS | CSS-Tricks — Подробная информация о @font-face для начинающих и профессионалов.
3. Урок по работе с HTML5 Canvas: Текст, шрифты, размер, стиль — Руководство по стилизации текста на холсте.
4. Сообщество Stack Overflow обсуждает использование пользовательских шрифтов с Canvas — Обсуждение и решение типичных задач.
5. API CanvasRenderingContext2D в JavaScript — Подробный обзор API Canvas 2D.
6. Начинаем использовать Google Fonts API | Google Developers — Подробная информация о Google Fonts.
7. Создайте свой набор @font-face с помощью Font Squirrel — Сервис для создания персонализированных наборов @font-face.