HTML Canvas中可变字体字重上限为999？如何突破该限制？

自制可变字体的wght轴取值范围为0-6600，通过HTML+CSS操作DOM元素时可完整覆盖所有字重值；但在HTML Canvas中实现相同动画时，字重超过1000后会重置为0。尝试过P5.js，但找到的示例均操作DOM元素而非Canvas。

以下是代码片段：

@font-face {
   font-family: 'TestFont';
   src: url('/assets/TestFont_v2.ttf') format('truetype-variations');
   font-weight: 0 6600;
}

<canvas id="canvas-text" width="1000" height="500"> </canvas>

var c = document.getElementById('canvas-text');
var ctx = c.getContext('2d');
function drawCanvas() {

    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.fillStyle = 'white';
    ctx.font = (scroll_percentage * 6600) + ' '  + '20px TestFont';
    const string_ = 'Lorem ipsum';
    ctx.fillText(string_, 20, 20);

}

let scroll_percentage = 0
function updateScrollProgress() {
    // 获取滚动进度百分比
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    scroll_percentage = winScroll / height;

    // 更新画布内容
    drawCanvas() 
}

Canvas的ctx.font属性解析字重时，仍遵循传统CSS font-weight的范围限制（100-900为常规有效值），超过1000的数值会被判定为无效，导致字体回退到默认字重（此处为0）。要正确控制可变字体的wght轴，需使用Canvas 2D API的fontVariationSettings属性直接指定轴值，而非通过font属性设置字重。

修改后的核心代码如下：

function drawCanvas() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.fillStyle = 'white';
    // 仅设置字体大小和字体族，不指定字重
    ctx.font = '20px TestFont';
    // 直接通过fontVariationSettings设置wght轴的具体数值
    ctx.fontVariationSettings = `"wght" ${scroll_percentage * 6600}`;
    const string_ = 'Lorem ipsum';
    ctx.fillText(string_, 20, 20);
}

• fontVariationSettings支持直接指定可变字体的各轴参数，格式为"轴名" 数值，多轴设置用逗号分隔
• 此方法不受传统font-weight数值范围限制，可完全覆盖自定义的0-6600区间
• 需确保字体文件正确包含wght轴，且取值范围与定义一致

内容的提问来源于stack exchange，提问作者wsgg