2010-05-21 6 views
6

J'essaie de créer une application de test HTML5 hors ligne, et je joue avec la nouvelle API google fonts en même temps. Quelqu'un at-il des idées pour mettre en cache les polices distantes? Le simple fait de placer l'appel api dans le manifeste du cache ne fonctionne pas, je suppose que c'est parce que l'API charge effectivement d'autres fichiers (ttf, eot, etc.).HTML5 hors-ligne cache google police api

Toutes les idées si vous utilisez la police api hors ligne serait possible?

Pour référence c'est l'appel que je fais:

http://fonts.googleapis.com/css?family=IM+Fell+English|Molengo|Reenie+Beanie 

Répondre

5

Si vous collez cette URL dans la barre d'adresse du navigateur, vous verrez les fichiers les liens CSS à:

http://themes.googleusercontent.com/font?kit=txVk61PTIsDrQQj2fK-76Q 
http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0 
http://themes.googleusercontent.com/font?kit=xwIisCqGFi8pff-oa9uSVOj-KzHqS7w8OFmqoAXdQwE 
+3

Mais vous devez faire attention. Google vous donne différents fichiers de police en fonction de l'OS que vous demandez. Donc, vous devriez ajouter tous les fichiers de polices pour tous les systèmes d'exploitation –

+1

En effet. Un moyen de mettre en cache toutes les extensions de fichier est décrit dans cette question stackoverflow: http://stackoverflow.com/questions/7042834/is-it-possible-to-load-webfonts-through-the-offline-storage-cache-manifest –

6

RobertC de approche est la solution ...

Soit, collez le lien fourni par google dans votre navigateur, puis ajoutez tous les fichiers référencés dans votre manifeste.

Dans mon cas, je référencé

<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'> 

qui consiste simplement à la définition de style suivante

@font-face { 
    font-family: 'Patua One'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Patua One'), local('PatuaOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'); 
} 

Donc, pour obtenir la police de travailler en cache (ou non hors ligne), vous avez pour ajouter l'URL référencée dans le 'src' à votre manifeste.