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

Question

在查看了各种解决方案后，like this one，我仍然无法在 Phonegap 中使用 Elusive Icons。

它在我的电脑上运行良好，但是当我使用 Adobe app builder 创建应用程序后，网络字体图标就不再显示了。

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

我的 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 or 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 Fiddle: https://jsfiddle.net/btxdpgvy/1/

Answer 2

经过一番研究，我发现 this article。

生成器不会从 res 文件夹中复制文件，只会复制您 link 到配置文件中的文件。

所以通过将 /fonts 文件夹移动到我的 css 文件夹，问题就解决了。

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

Not able to use custom fonts in Phonegap

android

css

cordova

webfonts