Mapbox GL JS加载自定义字体404 如何指定字体请求用户名路径

问题场景 #

• 使用版本：Mapbox GL JS v2.8.0
• 操作：通过编程方式向地图添加Symbol类型图层，文本标签需要使用此前通过Mapbox Studio上传至个人账号的自定义字体
• 现有图层配置代码：

const layer = {
    id: this.getLayerId(),
    type: 'symbol',
    layout: {
        'text-field': ['get', 'name'],
        'text-font': [
            "Chakra Petch Italic", // 个人账号下上传的自定义字体
            "Arial Unicode MS Regular" // 兜底公共字体
        ]
    },
    paint: {
        'text-color': '#ffffff',
    }
}

异常表现 #

地图渲染时字体资源拉取返回404错误，抓包发现默认请求的字体地址为公共路径：

https://api.mapbox.com/fonts/v1/mapbox/Chakra%20Petch%20Italic,Arial%20Unicode%20MS%20Regular/0-255.pbf?access_token={access_token}

问题根源：路径中使用了公共账号段/mapbox/，而非个人账号对应的/{username}/段。手动替换路径段为个人用户名后，可正常获取.pbf格式字体数据，验证地址如下：

https://api.mapbox.com/fonts/v1/{username}/Chakra%20Petch%20Italic,Arial%20Unicode%20MS%20Regular/0-255.pbf?access_token={access_token}

对照测试结果：在Mapbox Studio中直接创建同配置图层、使用同款自定义字体时，抓包显示字体请求走的是带个人用户名的正确路径，但Studio代码检查器中展示的text-font配置，和上述代码中编写的双字体字符串数组完全一致。

待解决问题 #

如何在Style layer的JSON配置中，指定字体资源从个人用户名路径下查找，而非默认拉取公共mapbox用户路径下的资源。

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