사이트가 오프라인 일 때 글꼴 파일 다운로드

Question

사용자가 언제든지 오프라인이되면 특정 사용자 정의 글꼴 파일의 내용을 보여주는 각도 응용 프로그램을 개발 중입니다. 글꼴 파일은 CSS 파일에서 참조됩니다.

사용자가 오프라인이라는 사실에 대한 내용을 표시 할 때까지 사용자 지정 글꼴 파일이 다운로드되지 않지만 사용자가 이미 오프라인 상태이고 글꼴 파일을 분명히 다운로드 할 수 없다는 것이 문제입니다. 관련 CSS 섹션은 아래에 있습니다.

글꼴 파일을 다운로드하기 전에 도움이 될만한 힌트가 있으십니까?

@font-face { 
    font-family: 'someFamily'; 
    src: url('fonts/someFamilyIcons.eot'), 
     url('fonts/someFamily.ttf') format('truetype'), 
     url('fonts/someFamily.woff') format('woff'), 
     url('fonts/someFamily.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 1

파일을 base64 인코더로 사용하고 그런 식으로 글꼴을로드 할 수 있습니다.

This 잠재적으로 도움이 될 수 있습니다. 당신이 base64로 문자열이 있으면

, 당신과 같이 귀하의 사이트에로드 할 수 있습니다 :

@font-face { 
    font-family: 'someFamily'; 
    src: url('fonts/someFamilyIcons.eot'), 
    src: url(data:application/x-font-woff;charset=utf-8;base64,THE_BASE64_STRING) format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 2

@font-face { font-. family:'MyWebFont'; 
src: url('webfont.eot'); /* IE9 Compat Modes */ 
src: url('webfont.eot?#iefix') format('embedded-opentype'), 
/* IE6-IE8 */ 
url('webfont.woff2') format('woff2'), 
/* Super Modern Browsers */ url('webfont.woff') format('woff'), 
/* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), 
/* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); 
/* Legacy iOS */ }` 

가 나는 또한 다른 브라우저에 추가 지원이 코드 줄을 제안 때문에 일부 브라우저하지 않을 수 있습니다 당신의 글꼴을 지원하거나 글꼴 사이트가 다운 된 경우 글꼴의 변화에 ​​대해 걱정할 필요가 없습니다 나중에 여기

body { font-family: 'MyWebFont', Fallback, sans-serif; } 

참조에 대한 링크는 다음과 같습니다

CSS tricks font reference