Как я могу подключить шрифт HYWenHei в node js используя Canvas?

Question

[AndreyKawilov]

Вот пример моего кода:

const Canvas = require('canvas')
Canvas.registerFont(path.join(__dirname + `/HYWenHei-85W.ttf`), { family: 'myFont' })
const canvas = Canvas.createCanvas(1680, 800);
const context = canvas.getContext('2d');
context.fillStyle = 'white'
context.font = "100px myFont"; //HYWenHei 85W
context.fillText("LARKY", 635, 187);

мне нужен текст на изображении именно HYWenHei шрифтом. Но при попытке запустить это я получаю следующую ошибку(точнее варн, так как всё продолжает работать кроме шрифта):

(process:7752): Pango-WARNING **: 15:24:53.793: couldn't load font "HYWenHei 85W Not-Rotated 100px", falling back to "Sans Not-Rotated 100px", expect ugly output.

Пытался гуглить 2 дня решений не нашёл. только над этим и сижу всё время...

Answer 1

[Андрей Хохлов]

А шрифт то зарегистрировали?
https://www.npmjs.com/package/canvas#registerfont

Comments

[AndreyKawilov]

Да кончно, исправил, но честно говоря работать лучше не стало.

(process:22392): Pango-WARNING **: 16:07:00.802: couldn't load font "HYWenHei Not-Rotated 100px", falling back to "Sans Not-Rotated 100px", expect ugly output.

[Андрей Хохлов]

Судя по всему, не только вы столкнулись с подобной проблемой. Причём последние ишью прям по вашему шрифту.

https://github.com/Automattic/node-canvas/issues/1887
https://github.com/Automattic/node-canvas/issues/1801
https://github.com/Automattic/node-canvas/issues/1608
https://github.com/Automattic/node-canvas/issues/868

Попробуйте другой шрифт, чтобы убедеться что проблема именно с конкретным шрифтом.
Попробуйте, может что-то из обсуждений поможет в вашем случае.
Попробуйте в докере запустить. У меня есть сервис который использует кастомный шрифт в node-canvas, без проблем.

[AndreyKawilov]

Андрей Хохлов, не смотрел, но всё решилось банально:
context.font = "100px HYWenHei-85W";

[Dayle]

AndreyKawilov, можете скинуть код, если конечно он не потерялся.

[Dayle]

Canvas.registerFont('./database/fonts/zh-cn.ttf', {family: 'HYWenHei-85W'} )

context.font = '100px HYWenHei-85W';

Pango-WARNING **: 23:54:55.874: couldn't load font "HYWenHei Not-Rotated 100px", falling back to "Sans Not-Rotated 100px", expect ugly output.