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

回答

相關問題