如何在HighChart中使用FontAwesome Regular版图标作为标记

问题根因 #

FontAwesome 5及以上版本中，同一Unicode的solid和regular图标是通过字体字重区分的，免费版的Free字族下，solid对应font-weight: 900，regular对应font-weight: 400。Highcharts默认渲染text类型的marker时没有指定FontAwesome的字重规则，会优先匹配字重更高的solid版本，所以始终显示实心图标。

解决方案 #

方案1：全局配置统一生效

通过包装Highcharts的SVGRenderer.text方法，给所有FA图标类型的marker统一设置字体属性，适合全图表都要用到regular风格FA图标的场景：

Highcharts.wrap(Highcharts.SVGRenderer.prototype, 'text', function (proceed, ...args) {
  const textNode = proceed.apply(this, args);
  // 匹配FA图标Unicode前缀
  if (args[0] && args[0].startsWith('text:\uf')) {
    textNode.css({
      fontFamily: 'Font Awesome 5 Free', // 使用FontAwesome 6则改为'Font Awesome 6 Free'
      fontWeight: 400 // regular对应400，需要solid时改900即可
    });
  }
  return textNode;
});

配置完成后原有marker配置不需要修改，直接使用即可：

marker: {
  symbol: 'text:\uf0c8'
}

方案2：单图表针对性修改

如果只需要在单个图表中使用regular图标，不需要全局改动，可以在图表的load事件中批量修改对应点的样式：

Highcharts.chart('container', {
  chart: {
    events: {
      load: function () {
        this.series.forEach(series => {
          series.points.forEach(point => {
            if (point.graphic?.textStr) {
              point.graphic.css({
                fontFamily: 'Font Awesome 5 Free',
                fontWeight: 400
              })
            }
          })
        })
      }
    }
  },
  // 其余原有配置保持不变
})

注意事项 #

• 若使用的是FontAwesome Pro版本，fontFamily替换为Font Awesome 5 Pro即可，字重规则不变
• 请确保页面引入的FontAwesome资源包含regular字重，免费版FA的regular图标覆盖范围有限，未收录的图标会自动fallback到solid版本

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