Google Charts Пользовательский шрифт отображается неправильно - Firefox

Question

Google Charts Пользовательский шрифт отображается неправильно - Firefox

1

Мы используем 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);
}

ewitkows 02 июнь 2017, в 17:40

Источник

Теги:

javascript

fonts

firefox

google-visualization

2 ответа

Ещё вопросы

Mathieu Veurman · Answer 1 · 2018-02-08T09-44-00.000Z

Имела та же проблема. Это связано с шрифтом, имеющим пробел в названии. Я использовал Bauhaus 93, и он не работал. Но когда я изменил его, включив одинарные кавычки в название "Bauhaus 93", он начал работать для меня.

WhiteHat · Answer 2 · 2017-06-02T16-34-00.000Z

не уверен, что это поможет,
но вы можете убедиться, что все элементы имеют правильную 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);