Mapbox瓦片元数据UTF-8字符显示异常问题求助

我正在开发基于Mapbox的多语言（英/法）交互式网站，英文版本已完成，开发法语版本时遇到重音及扩展字符显示乱码的问题：点击地理图形弹出的弹窗中，从Mapbox瓦片源图层获取的法语元数据重音字符显示异常。

代码实现示例 #

map.on('click', 'myInterestingLayer', (e) => {
  layerData = e.features[0].properties; // 简化代码
  if (language === 'FR') {
    var description = buildHtmlFromData(layerData.nameFrHtml);
  }
      
  new mapboxgl.Popup()
      .setMaxWidth(popupWidthForDevice)
      .setLngLat(e.lngLat)
      .setHTML(description)
      .addTo(map);
}); // 点击事件结束

排查情况 #

• 控制台打印e.features[0].properties时，nameFr字段显示为"Ottawa/a�roport international Macdonald-Cartier"
• Mapbox Studio中该瓦片集的元数据重音字符显示正常
• 页面已设置UTF-8编码，其他非瓦片集来源的弹窗重音字符显示正常

最终解决方法（10月6日补充） #

确认是源瓦片集文件编码问题，使用Notepad++将源文件转换为无BOM的UTF-8编码后，乱码问题解决。

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