Как сделать текст картинкой css?

• Сначала определитесь с результатом: картинка для скачивания и декоративный текст на странице требуют разных действий.
• CSS меняет отображение HTML, но у него нет команды сохранения блока в PNG.
• Для простой надписи подходит canvas: JavaScript задает размер холста, шрифт, цвет и рисует строку методом fillText().
• После рисования canvas.toBlob(callback, 'image/png') создает изображение. Перед использованием результата проверьте, что callback получил объект, а не null.
• Шрифт на холсте следует загрузить до рисования. Оформление HTML автоматически туда не переносится.
• Для разового баннера проще экспортировать готовую надпись из редактора. На самом сайте сохраните читаемый текст или подходящее текстовое описание изображения.

Одним CSS получить скачиваемую картинку с надписью нельзя: стили описывают, как браузер показывает документ, а создание файла требует отдельного экспорта. Если нужен всего один баннер, перенесите текст и его оформление в графический редактор, выставьте размер изображения и прозрачный фон, затем сохраните PNG. Это избавит от разработки функции, которая больше не понадобится.

Для генерации множества надписей на сайте можно использовать canvas вместе с JavaScript. Задайте холсту ширину и высоту через его атрибуты, получите контекст рисования, установите шрифт и цвет, затем вызовите fillText с координатами строки. Размер холста и его размер на странице различаются: увеличение только CSS-ширины растянет уже нарисованное изображение, но не добавит деталей. Многострочный текст придется разбить на строки самостоятельно, измеряя их ширину и выбирая расстояние между базовыми линиями.

После загрузки выбранного шрифта и завершения рисования вызовите toBlob с типом image/png. Результат приходит в callback, поэтому сохранять его как готовое синхронное значение нельзя. Проверьте результат, создайте ссылку для скачивания полученного файла и освободите временный адрес, когда он больше не нужен. Холст изначально прозрачен, пока вы не закрасили фон.

CSS-тени, переносы строк и вложенные элементы исходного HTML не копируются на canvas автоматически. Для сложного блока потребуется отдельный инструмент захвата или другой способ экспорта. Если картинка размещается на сайте, не теряйте ее смысл для тех, кто не видит изображение: предусмотрите подходящий alt или обычный текст рядом.