Google Charts 自定义字体未正确呈现 - Firefox答案

【问题标题】：Google Charts Custom Font Not Rendering Correctly - FirefoxGoogle Charts 自定义字体未正确呈现 - Firefox
【发布时间】：2017-11-04 01:31:52
【问题描述】：

我们正在使用 Google 图表在我们的网站上创建一些可视化。我们的网站使用名为“Gotham A”的“自定义”字体。字体在网站上加载和工作正常，正文和所有其他内容都呈现得很好。

对于我们的图表，我们的 X 轴、Y 轴和标题也都使用 Gotham A 字体。在 IE 和 Chrome 中，charts\title 可以很好地呈现字体，但 FireFox 不知道如何正确呈现它。

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

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

以下是 FireFox 中相同内容的上限：

查看“Contract Sales - Past 12 Months”，在 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);
}

【问题讨论】：

当我使用google's fonts 之一时，它在所有三个浏览器中都能正常工作——您是否检查了开发人员工具中的“网络”选项卡以确保正在下载字体？
谢谢@WhiteHat！是的，它已下载。在这些屏幕截图中，您会看到“截至 2017 年 5 月 26 日的数据”和“6 个月平均值”这两个术语——这些都是我们使用的 Gotham 字体。只有 Google Charts 似乎无法解释字体，并且开发工具中的 Console\Network 选项卡不会显示任何错误。

标签： javascript firefox fonts google-visualization

【解决方案1】：

遇到了同样的问题。它与名称中有空格的字体有关。我使用的是包豪斯 93，但它不起作用。但是当我将其更改为在名称中包含单引号时，“包豪斯 93”就开始为我工作了。

【讨论】：

【解决方案2】：

不确定这是否有帮助，
但你可以确保所有元素都有正确的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);

【讨论】：