2012-11-20 62 views
5

是否存在允許用戶從Google Web字體字體中選擇他/她的選擇的小部件,並且可以將此小部件嵌入到您自己的Web應用程序中?Google Webfonts選擇器和用於Javascript的嵌入器小部件

http://www.google.com/webfonts

一些一種先進的字體選擇對話框與強大的搜索和預覽功能,使動態加載谷歌網絡字體的。

Google Webfonts是否公開必要的列表和元數據來構建這樣的小部件(如果尚不存在)?

回答

5

我找到了一個項目: https://github.com/agoragames/GWFSelect-for-jQuery-UI

一些缺點,我注意到:

  • fouc,你通過字體列表中滾動
  • 似乎下載整個字體而不是需要的字符
  • 取決於jQuery UI

一個不錯的項目,但可能會做這項工作。 請注意,如果您嘗試使用它,您可能需要使用您自己的API密鑰。 you can get one from google

Google Webfonts是否公開必要的列表和元數據來構建這樣的小部件(如果不存在的話)?

他們有一個API,你可以用它來建立這樣一個小部件: https://developers.google.com/webfonts/docs/developer_api

我想象谷歌文檔使用此API爲他們驚人的字體選擇。

+0

大,感謝彼得!我在FF上測試了演示,並且無法使其工作,但這足以構建我自己的選擇器。 –

+0

@MikkoOhtamaa你可能需要添加你的API密鑰(public API是速率有限的)。 在 的JavaScript從 變種fontURL/jquery.gwfselect.js 變更線6 = 'https://www.googleapis.com/webfonts/v1/webfonts', 到 VAR fontURL =的「https:// WWW。 googleapis.com/webfonts/v1/webfonts?key = <您的API密鑰來自https://code.google.com/apis/console>', – schpet

3

看一看引導形式助手:http://bootstrapformhelpers.com/googlefont/

他們提供了一個非常好的谷歌的Web字體選擇器而無需GWFSelect換jQuery的UI提到的,因爲他們使用了分段預覽圖像和導出字體列表中的缺點爲選擇框。

7

我們創建了一個Google字體選擇器。

它不會在您滾動時加載所有字體。它只加載被點擊的字體。對於字體預覽,我們使用加載非常快的單個圖像。它有700+的字體

Download it from github

See demo here

+0

Demo似乎無法正常工作,但我從GitHub下載了它,它是一個非常小的工具。這就像霍多爾一樣 - 它只有一份工作,並且做得很好。謝謝Saadi! – dkellner

+0

@dkellner謝謝。我也更新了演示鏈接。 – Saadi