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

以下是供参考的链接：

CSS tricks font reference

在网站下线时下载字体文件

2 个答案: