如何在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字體/字體系列？

回答

相關問題