如何在 Google Visualization API 中指定自定义 CSS 字体/字体系列？

Question

我正在尝试为我的图表指定自定义 CSS 字体，该字体是通过 Google 可视化 API 生成的。我尝试在我的 CSS 样式表中指定字体，以及使用 Google fonts.googleapis.com

在我的 Google Visualization API 图表选项中：

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 可视化 API 中有一个 [未记录？] 选项，可让您将图表直接呈现到页面中，而无需中间 iframe。这样做时，您的图表可以使用您在文档中定义的任何字体系列。

选项是“forceIFrame”，您想在“选项”哈希中将其设置为 false（即与 fontName 选项相同的哈希）。