Question

我正在尝试为我的图表指定自定义CSS字体，该字体是通过Google Visualization 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，或者显示为 Magra在HEAD标签中指定。

我在这里彻底探讨了各种选择： 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中绘制的，因此您在文档中设置的任何样式都不会应用于图表。在谷歌将其添加到他们的API之前，没有简单的解决方法。

编辑：

我找到了一个有趣的工作...它不适用于较旧的IE，但是Google Visualization API中有一个[未记录的？]选项，可以让您将图表直接渲染到页面中，而不需要中间的iframe。这样，您的图表可以使用您在文档中定义的任何字体系列。

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

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

1 个答案: