如何在Google Visualization API中指定自定义CSS font / font-family？

Question

我正在尝试为我的图表指定自定义CSS字体，该字体是通过Google Visualization API生成的。我已经尝试在我的CSS样式表中指定字体，也尝试使用Google fonts.googleapis.com

在我的Google Visualization API chartOptions中：

var options = {
    fontName : 'FranchiseRegular',
    tooltip: { textStyle: { fontName: 'Verdana', fontSize: 12 } }
};

在我的style.css中：

@font-face {
font-family: 'FranchiseRegular';
src: url('/_fonts/franchise-bold-webfont.eot');
src: url('/_fonts/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('/_fonts/franchise-bold-webfont.woff') format('woff'),
     url('/_fonts/franchise-bold-webfont.ttf') format('truetype'),
     url('/_fonts/franchise-bold-webfont.svg#FranchiseRegular') format('svg');
font-weight: normal;
font-style: normal;
}

在我的HEAD标签中：

<link href='http://fonts.googleapis.com/css?family=Magra:400,700' 
      rel='stylesheet' type='text/css'>

因此，Verdana调用非常有效，所有的工具提示都正确地显示为Verdana。但是标题、轴标签和图表标签都指向TimesNewRoman。我希望它们既可以显示为CSS中指定的FranchiseRegular，也可以显示为HEAD标记中指定的Magra。

我已经彻底研究了这里的选项：https://developers.google.com/chart/interactive/docs/gallery/bubblechart

问题的核心是，什么是正确的语法

fontName: <global-font-name>

如果您能在chartOptions中为我的fontName提供正确的语法来实现这两种方法，我将不胜感激。提前感谢！:)

Answer 1

这里有一个相关的答案：

Font Family Selection With Google Charts?

原因是Google图表是在iframe中绘制的，所以您在文档上设置的任何样式都不会应用于图表。除非Google将其添加到他们的API中，否则没有简单的解决方法。

编辑：

我发现了一项有趣的工作...它不能在旧的IE上工作，但是有一个未记录的？Google Visualization API中的一个选项，它允许您将图表直接呈现到页面中，而不需要中间的iframe。这样，您的图表就可以使用您在文档中定义的任何字体系列。

该选项为"forceIFrame“，您希望在"options”散列中将其设置为false (即与fontName选项相同的散列)。