谷歌图表自定义字体无法正确渲染 - Firefox

Question

我们正在使用Google Charts在我们的网站上创建一些可视化。我们的网站使用＆＃34; custom＆＃34;字体名为＆＃34; Gotham A＆＃34;。字体加载并在网站上正常工作，正文和其他所有内容渲染得很好和花花公子。

对于我们的图表，我们的X轴，Y轴和标题都使用Gotham A字体。在IE和Chrome中，图表\标题渲染字体很好，但FireFox不知道如何正确渲染它。

下面是关于它们如何渲染的示例以及我们用于加载图表的脚本。是否有任何我可以更改的设置等有助于在FireFox中正确呈现这些字体？

以下是Chrome中图表的屏幕截图：

这是FireFox中相同内容的上限：

查看＆＃34;合同销售 - 过去12个月＆＃34;，在Firefox版本中，一些字母如下面的r，下面的s和数字1和2都没有准确呈现。轴上没有任何字符。

以下是我们如何设置图表的字体和内容：

function LoadChart(responseData, chartTitle, xType, xTitle, yType, yTitle, chartDOMObjSelector, chartTitleWidth) {
  var chartFont = 'Gotham A';
  // Set chart options
  var options = {
      'title': chartTitle,
      'width': chartTitleWidth,
      'titleTextStyle': { color: '#606060', fontName: chartFont, fontSize: '14', bold: false, italic: false },
      'hAxis': { textStyle: { color: '#24597f', fontName: chartFont, fontSize: '10', bold: false, italic: false } },
      'vAxis': { textStyle: { color: '#24597f', fontName: chartFont, fontSize: '10', bold: false, italic: false } },
      'legend': { position: 'none' } // set Legend Position to None to hide it
  };

  var data = new google.visualization.DataTable();
  //logic to add row data...
     var chart = new google.visualization.ColumnChart($('#mychart'));
  chart.draw(data, options);
}

Answer 1

不确定这是否有帮助，
但是你可以确保所有元素都有正确的font-family

当'ready'事件触发时......

var chart = new google.visualization.ColumnChart($('#mychart')[0]);

google.visualization.events.addListener(chart, 'ready', function () {
  $('text').attr('font-family', chartFont);
});

chart.draw(data, options);

Answer 2

有同样的问题。它与名称中有空格的字体有关。我使用的是包豪斯93，它不起作用。但是当我把它改成包括名字中的单引号时，包豪斯93＆＃39;然后它开始为我工作。