在 Highcharts 中使用自定义字体

问题描述

我正在尝试将 3rd 方排版字体应用于 Highcharts 折线图，喜欢 X/Y 轴标签、X 轴标题、常规和粗体的工具提示、情节线标签等。我认为，它应该通过 CSS 类来完成，比如使用 class="abc-body-small" 或 "abc-body-small-heavier"（而不是 b 标签）作为字体/样式，可能在定义的 TS 文件中图表选项。

有人可以告诉我怎么做吗？（在 Angular6 中使用 Highcharts6）

TIA，奥列格

解决方法

使用字体，您可以附加 css-styles，如以下代码片段所示：

示例：

var newStyle = document.createElement('style');

newStyle.appendChild(document.createTextNode("\
@font-face {\
  font-family: 'Pacifico';\
  font-style: normal;\
  font-weight: 400;\
  src: local('Pacifico Regular'),local('Pacifico-Regular'),url(https://fonts.gstatic.com/s/pacifico/v13/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2');\
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\
}\
"));

document.head.appendChild(newStyle);

查看这些来源以获取更多信息：

highcharts highcharts typography