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

我想为我的图表指定一个自定义的CSS字体，它是通过Google Visualization API生成的。我已经尽我的CSS样式表内speccing字体都，以及使用谷歌的fonts.googleapis.com如何在Google Visualization API中指定自定义CSS字体/字体系列？

我的谷歌可视化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; 
}

我的头标签内

：

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

因此，宋体调用工作格雷亚t，所有工具提示都正确显示为Verdana。但是，标题，轴标签和图表标签都踢出TimesNewRoman。我希望它们显示为CSS中指定的FranchiseRegular或者HEAD标签中指定的Magra 。

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

而问题的心脏是，究竟是什么

fontName: <global-font-name>

正确的语法，如果您能提供给我的fontName正确的语法在图表选项中完成其中任何一项，我将不胜感激。提前致谢！ :)

来源

2012-05-11 AcroYogi

至于style.css的例子，EOT是严格的Internet Explorer派对。 http://reisio.com/examples/webfonts/ – reisio

通常包含字体（通过'@ font-face'）在字体名称周围使用引号，以便您可以尝试类似'fontName：'\'FranchiseRegular \'' – MikeM

@reisio - 你是对的，我为了简洁而编辑过......我其实包括外部字体文件引用。我已经编辑了这个问题，并添加了一些清晰的内容 – AcroYogi

的原因是，谷歌的图表绘制的iframe里面，所以你对你的文件设置将不会应用到图表的任何样式。在谷歌将其添加到他们的API之前，没有简单的解决方法。

编辑：

我发现一个有趣的工作，围绕...它不工作在旧IE的，但有谷歌的可视化API，可以让你直接呈现的图表为在[无证？]选项页面，没有中间的iframe。这样做，您的图表就可以使用您在文档中定义的任何字体系列。

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

来源

2012-07-31 22:31:23

“编辑”评论的任何示例？这将是伟大的 – Ruffo

@Ruffo对不起，我直到现在才注意到你的评论。不幸的是，我没有一个独立的例子，但我确实在http://scapsync.com/stats/count-types上部署了这个例子。您会看到该图表使用Droid Sans来匹配我网站的其余部分。如果您在该页面上查看源代码，则可以看到我将forceIFrame设置为false，然后图表字体从我在元素上设置的样式继承。 –

不要担心队友，谢谢你的时间！ – Ruffo

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

回答

相关问题