周六的时候发了一篇文章:遇到个难题,想请教下。发文不久后,问题得到解决,期间感谢提出宝贵建议的朋友。我还在微博上求助了下:
看到这个回复,已经确认肯定是我那个地方写的有问题,我还特意写了个 demo,使用真实的数据还原:
const width = 600;
const height = 80;
let index = 0;
const draw = (font, text) => {
let parentDom = document.getElementById('render-canvas-warp');
let textCanvas = document.createElement('canvas');
let ratio = window.devicePixelRatio;
textCanvas.width = width * ratio;
textCanvas.height = height * ratio;
textCanvas.style.width = `${width}px`;
textCanvas.style.height = `${height}px`;
let childCtx = textCanvas.getContext('2d') as CanvasRenderingContext2D;
childCtx.fillStyle = '#222';
childCtx.font = font;
if (childCtx.font === '10px sans-serif') {
console.log('字体渲染错误:', text, childCtx.font);
}
childCtx.textBaseline = 'top';
childCtx.textAlign = 'left';
childCtx.setTransform(ratio, 0, 0, ratio, 0, 0);
childCtx.fillText(text, 0, index * height + 20);
parentDom.appendChild(textCanvas);
}
// 怀疑是异步字体没加载完
setTimeout(() => {
// 可以正常渲染
draw('40px a5a5099ebd64783e09122bbb0050001', '第一集《自然的馈赠》');
// 不能正常渲染
draw('40px 08c71f492b160b4e767fcf980040001', '系列晶闸管触发器在可逆直流稳压电源的应用');
}, 2000);
经过一番仔细对比后发现,是因为使用自定义字体名字的问题。使用 CSS 实现时字体名加了单引号:
而使用 canvas 绘制时未加单引号,加上单引号就好了:
究其原因是因为这个字体名比较特殊,以 0 开始,需要加单引号,以至于我掉坑里了。
在写 demo 的过程中,体会到了 vite 的强大,真是写 demo 的好帮手,速度快,而且可以直接使用 TS,无需配置即可享受到高效的开发,太棒了。不知道 vite 的可以看这篇 不得不说,vite 确实是革命性的
时间不早了,大家早点休息。
长按关注
素燕《前端小课》
帮助 10W 人入门并进阶前端
官网:https://lefex.gitee.io/