2010-05-21 6 views
6

오프라인 HTML5 테스트 응용 프로그램을 만들려고하고 있으며 새로운 Google 글꼴 api를 동시에 사용하고 있습니다. 누구든지 원격 글꼴을 캐시하는 방법에 대한 아이디어가 있습니까? 캐시 매니페스트에 api 호출을 두는 것만으로는 작동하지 않습니다. API가 실제로 다른 파일 (ttf, eot 등)을로드하기 때문입니다.HTML5 오프라인 캐시 Google 글꼴 api

글꼴을 오프라인으로 사용하는 경우 아이디어가 있습니까? 참고로

이것은 내가 만드는 중이라서 전화는 다음과 같습니다

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

답변

5

브라우저의 주소 표시 줄에 URL을 사용하면 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

하지만 조심해야합니다. Google은 요청하는 OS에 따라 다양한 글꼴 파일을 제공합니다. 따라서 모든 OS에 대한 모든 글꼴 파일을 추가해야합니다. –

+1

Indeed. 모든 파일 확장명을 캐시하는 방법은이 stackoverflow 질문에 설명되어 있습니다. http://stackoverflow.com/questions/7042834/is-it-possible-to-load-webfonts-through-the-offline-storage-cache-manifest –

6

Robertc의 접근 방식은 해결책입니다 ...

즉, 브라우저에 Google 제공 링크를 붙여 넣은 다음 매니페스트에 참조되는 파일을 추가하십시오. (오프라인 여부) 캐시 때 내 경우

나는, 당신이 일을 글꼴을 얻기 위해 바로 다음과 같은 스타일 정의 그래서

@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'); 
} 

구성

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

를 참조 'src'에 참조 된 URL을 매니페스트에 추가하십시오.

관련 문제