Google Charts自定义字体无法正确呈现 - Firefox

我们正在使用Google Charts在我们的网站上创建一些可视化效果。我们的网站使用名为“Gotham A”的“自定义”字体。字体加载和在网站上正常工作，正文和所有其他渲染只是罚款和丹迪。Google Charts自定义字体无法正确呈现 - Firefox

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

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

这里的图表在Chrome浏览器截图：

而且这里有同样的东西在Firefox中盖：

看看“合同销售 - 过去12个月”，在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); 
}

来源

2017-06-02 ewitkows

当我使用[google的字体]（https://fonts.google.com/specimen/Gloria+Hallelujah?selection.family=Gloria+Hallelujah）之一时，它在所有三种浏览器中都能正常工作 - 您是否检查过开发人员工具中的“网络”选项卡以确保正在下载字体？ – WhiteHat

谢谢@WhiteHat！是的，它的下载。在那些您看到术语“数据截至2017年5月26日”和“6个月平均值”的截图中 - 这些截图是我们正在使用的Gotham字体。只有谷歌图表似乎无法解释字体，开发工具中的控制台\网络标签不会显示任何错误。 – ewitkows

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

来源

2017-06-02 18:21:56 WhiteHat

有同样的问题。它与名称中具有空格的字体有关。我正在使用包豪斯93，并没有工作。但是当我改变它以包含名字中的单引号'包豪斯93'时，它开始为我工作。

来源

2018-02-08 12:38:56

Google Charts自定义字体无法正确呈现 - Firefox

回答

相关问题