Angular6结合Highcharts6为图表元素应用第三方自定义字体的实现咨询

前置准备 #

• 定义并引入自定义CSS类
  先确保你提到的abc-body-small、abc-body-small-heavier已经在全局样式文件（比如styles.css/styles.scss）中定义，同时提前加载对应第三方字体的@font-face配置，示例如下：

  /* 全局样式中引入第三方字体 */
  @font-face {
    font-family: 'CustomThirdFont';
    src: url('./assets/fonts/custom-third-font.woff2') format('woff2');
  }
  
  /* 自定义CSS类 */
  .abc-body-small {
    font-family: 'CustomThirdFont', sans-serif;
    font-size: 12px;
    font-weight: 400;
  }
  .abc-body-small-heavier {
    font-family: 'CustomThirdFont', sans-serif;
    font-size: 12px;
    font-weight: 600;
  }
  

• 解决Angular样式封装问题
  注意：如果不处理样式封装问题，自定义类的样式大概率会被Angular默认的封装机制拦截，无法作用于Highcharts渲染的元素
  Angular组件默认的ViewEncapsulation.Emulated会给组件DOM元素加上专属属性选择器，两种解决方案二选一即可：
  • 把和Highcharts相关的自定义样式全部放到全局样式文件中
  • 给当前使用图表的组件单独设置样式封装为None，在组件的装饰器中添加配置：

    @Component({
      selector: 'app-line-chart',
      templateUrl: './line-chart.component.html',
      styleUrls: ['./line-chart.component.css'],
      encapsulation: ViewEncapsulation.None // 关闭样式封装
    })
    

图表配置逐项修改（对应需求场景） #

• X/Y轴刻度标签
  直接在轴的labels配置项中指定className即可，不需要额外修改默认style配置：

  chartOptions: Highcharts.Options = {
    xAxis: {
      labels: {
        className: 'abc-body-small'
      },
      // 其他X轴配置
    },
    yAxis: {
      labels: {
        className: 'abc-body-small'
      },
      // 其他Y轴配置
    }
  }
  

• X轴标题
  在X轴的title配置中指定类名：

  xAxis: {
    title: {
      text: '月份', // 原有标题文本
      className: 'abc-body-small-heavier' // 标题用加粗类
    }
  }
  

• 提示框（Tooltip）常规/加粗文本
  注意：useHTML属性必须设置为true，否则tooltip会默认渲染为SVG元素，自定义CSS类无法生效
  开启useHTML让tooltip渲染为DOM元素，即可正常识别自定义类；如果要替换原有<b>标签实现加粗，直接在自定义的formatter中用类名替换即可：

  tooltip: {
    useHTML: true,
    // 自定义tooltip内容，替换原有b标签
    formatter: function() {
      return `
        <div class="abc-body-small">
          <span class="abc-body-small-heavier">${this.series.name}</span>：${this.y} 单位
        </div>
      `;
    }
  }
  

• 绘图线标签
  在对应轴的plotLines配置的label项中指定类名：

  yAxis: {
    plotLines: [
      {
        value: 100, // 原有绘图线数值配置
        color: '#ff3333',
        width: 2,
        label: {
          text: '预警阈值', // 原有标签文本
          className: 'abc-body-small-heavier'
        }
      }
    ]
  }
  

注意事项 #

• 不要在对应元素的style配置中单独写字体相关属性，否则会覆盖自定义类的样式
• 如果出现Highcharts默认样式覆盖自定义类的情况，可以在CSS类中提高优先级，比如绑定对应的Highcharts内置类：

  .highcharts-xaxis-labels.abc-body-small,
  .highcharts-yaxis-labels.abc-body-small,
  .highcharts-plot-line-label.abc-body-small-heavier {
    /* 自定义样式属性 */
  }
  

• 确认自定义类的字体路径、权限配置正确，避免字体加载失败回退到默认字体

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