Мы используем Google Charts для создания некоторых визуализаций на нашем веб-сайте. Наш сайт использует "пользовательский" шрифт под названием "Gotham A". Шрифт загружается и отлично работает на веб-сайте, текстовом тексте и все остальное делает просто прекрасным и денди.
Для наших диаграмм наши оси X, Y-оси и титры используют шрифт Gotham A. В IE и Chrome диаграммы \title визуализируют шрифт очень хорошо, но 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);
}
Имела та же проблема. Это связано с шрифтом, имеющим пробел в названии. Я использовал Bauhaus 93, и он не работал. Но когда я изменил его, включив одинарные кавычки в название "Bauhaus 93", он начал работать для меня.
не уверен, что это поможет,
но вы можете убедиться, что все элементы имеют правильную 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);