无法在Phonegap中使用自定义字体

Question

在查看各种解决方案like this one之后，我仍无法让Elusive Icons在Phonegap中运行。

它在我的计算机上工作正常，但是一旦我使用Adobe app builder创建应用程序，Web字体图标就不再显示。

我的文件夹结构如下所示：

我的CSS看起来像这样：

@font-face {
  font-family: 'Elusive-Icons';
  src: url('../res/fonts/elusive-icons.ttf') format('truetype'),
       url('../res/fonts/elusive-icons.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

如果有人对我能做些什么来解决这个问题有任何建议，我将非常感激。

Answer 1

我建议将字体直接嵌入到CSS文件中。您可以使用Gift of speed Base 64 encoder或Opinionated geek Base 64 encoder等网站对您的字体进行Base 64编码。然后，您需要修改CSS文件以使用此嵌入字符串，而不是指向单独的字体文件。

可以通过更改：

来完成

@font-face {
  font-family: 'Elusive-Icons';
  src: url('../res/fonts/elusive-icons.ttf') format('truetype'),
       url('../res/fonts/elusive-icons.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

要

@font-face {
  font-family: 'Elusive-Icons';
  src: url('data:application/octet-stream;base64,*Truetype Base 64 encoded string here*') format('truetype'),
       url('data:application/octet-stream;base64,*Opentype Base 64 encoded string here*') format('opentype');
  font-weight: normal;
  font-style: normal;
}

工作JS小提琴： https://jsfiddle.net/btxdpgvy/1/

Answer 2

经过一番研究后，我找到了this article。

构建器不会复制res文件夹中的文件，只会复制您在配置文件中链接的文件。

因此，将/fonts文件夹移动到我的css文件夹，问题就解决了。