下載字體文件的情況下，網站進入離線狀態

我正在開發一個Angular應用程序，用於顯示某個自定義字體文件的內容，如果用戶在任何時候都離線。字體文件在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; 
}

來源

2017-03-08 AshD

您可以使用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; 
}

來源

2017-03-08 06:06:47 cayoub88

缺點：你必須嵌入字體的所有版本（EOT，TTF，WOFF，SVG）才能工作。 – RoelN

@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

來源

2017-03-08 06:43:08

下載字體文件的情況下，網站進入離線狀態

回答

相關問題