下载字体文件以防网站离线

Question

我正在开发一个 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;
}

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; }

这里有一个link供参考：

CSS tricks font reference

下载字体文件以防网站离线

Download font files in case site goes offline

css

font-face