周六那个问题解了！

周六的时候发了一篇文章：遇到个难题，想请教下。发文不久后，问题得到解决，期间感谢提出宝贵建议的朋友。我还在微博上求助了下：

看到这个回复，已经确认肯定是我那个地方写的有问题，我还特意写了个 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/