2012-11-20 14 views
5

Esiste già un widget che consentirebbe all'utente di scegliere la propria scelta da uno dei font di Google Webfonts e si potrebbe incorporare questo widget nella propria applicazione Web?Google Webfonts chooser e embedder widget per Javascript

http://www.google.com/webfonts

Una specie di dialogo Font raccoglitrice avanzata con la ricerca robusta e funzionalità di anteprima, che consente di caricare in modo dinamico Google webfonts.

Google Webfonts espone l'elenco ei metadati necessari per creare tale widget se non esiste ancora?

risposta

5

ho trovato un progetto: https://github.com/agoragames/GWFSelect-for-jQuery-UI

alcuni inconvenienti che ho notato:

  • fouc mentre si scorre l'elenco dei caratteri tipografici
  • sembra scaricare l'intero carattere piuttosto che il caratteri necessari
  • dipende da jQuery UI

un bel progetto e potrebbe fare il lavoro. nota che se stai cercando di usarlo probabilmente dovrai usare la tua chiave API. you can get one from google.

Google Webfonts espone l'elenco e i metadati necessari per creare tale widget se non esiste ancora?

hanno un API che è possibile utilizzare per costruire un simile widget https://developers.google.com/webfonts/docs/developer_api

immagino Google Documenti utilizza questa API per la loro straordinaria Scelta font.

+0

Grande, grazie Peter! Ho provato la demo su FF e non ho potuto farlo funzionare, ma questo è probabilmente sufficiente per costruire il mio selezionatore. –

+0

@MikkoOhtamaa probabilmente dovrai aggiungere la tua chiave API (l'API pubblica è a tariffa limitata). in javascript/jquery.gwfselect.js cambiare linea 6 da var fontURL = 'https://www.googleapis.com/webfonts/v1/webfonts', a var fontURL = 'https: // www. googleapis.com/webfonts/v1/webfonts?key = ", – schpet

3

Date un'occhiata a Bootstrap Forma Helpers: http://bootstrapformhelpers.com/googlefont/

Essi forniscono davvero un bel selettore di Google Web Fonts, senza gli inconvenienti citati per GWFSelect-per-jQuery-UI perché utilizzano un prerenderizzati anteprima immagine ed un elenco di caratteri esportato per la casella di selezione.

7

Abbiamo creato un selettore di caratteri di Google.

Non carica tutti i caratteri durante lo scorrimento. Carica solo i caratteri su cui è stato fatto clic. Per l'anteprima dei font, stiamo usando una singola immagine che carica molto velocemente. Ha 700+ font

Download it from github

See demo here

+0

La demo sembra non funzionare ma l'ho scaricata da GitHub ed è uno strumento piuttosto piccolo. È proprio come Hodor: ha un solo lavoro e lo fa correttamente. Grazie Saadi! – dkellner

+0

@dkellner Grazie. Ho aggiornato anche il link dimostrativo. – Saadi

Problemi correlati