在研究了各种解决方案之后, 像这样的解决方案,我仍然无法在Phonegap中使用Elusive Icons。

它可以在我的计算机上正常工作,但是一旦我使用Adobe应用程序构建器创建了应用程序,网络字体图标就不再显示。

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

在此处输入图片说明

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

如果有人对我可以采取的解决措施有任何建议,我将不胜感激。

===============>>#1 票数:1

我建议将字体直接嵌入CSS文件中。 您可以使用诸如Gift of speed of Base 64编码器Opinioned geek Base 64编码器之类的网站来对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/

===============>>#2 票数:0 已采纳

经过一番研究,我找到了这篇文章

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

因此,通过将/fonts文件夹移动到我的css文件夹,此问题得以解决。

  ask by Steven translate from so

未解决问题?本站智能推荐:

3回复

让web字体与phonegap和android一起使用 - 怎么样?

PhoneGap是否支持Web字体,如果支持,您如何使用它们。 我目前在我的页面中有这个代码,但是在加载到模拟器中时它不起作用(在Android应用程序中,我没有尝试通过浏览器加载页面)... 当我在firefox中加载我的页面时,它确实有效,所以我不确定我做错了什么。 可能有助
1回复

phonegap自定义字体在标题中不起作用

我有一个phonegap应用程序,它使用在CSS中声明为这样的自定义字体: 在Firefox和Chrome中进行测试时,该应用程序可以正常运行。 但是,当将其编译为android应用时,该自定义内容不会出现在带有标头标记(等)样式的任何内容中 字体会正确显示在所有正文上。
1回复

Phonegap-Android:使用阿拉伯语/波斯语字体

问题是:如何在Phonegap中使用阿拉伯语(或波斯语)字体? 我尝试将它们转换为所有格式,然后使用@ font-face 但它只是向我显示矩形(但在PC中工作) 提前致谢 :)
2回复

Phonegap Windows Phone 8自定义Web字体

我试图将自定义字体嵌入Windows Phone 8应用程序中的WebView中,并且已经尝试了所有方法。 我遇到了一篇非常有前途的文章: blogs.msdn.com/b/wsdevsol/archive/2012/10/23/about-webview-and-embedded-fonts
2回复

Android上的Chrome,不考虑系统字体的字体粗细

对于那些感兴趣的人来说,这是一个不错的挑战: 我们知道Roboto字体具有较薄的版本,通常可以通过CSS使用font-weight: lighter或weight值小于400的font-weight: lighter来指定这种字体。 带有font-weight: 200; font-
2回复

在fontfamily后备调用中加载所有字体系列

我在做 : 所有这些系列都使用@ font-face嵌入。 尽管Windows和Linux上的Chrome加载了后备广告中提到的所有字体系列(通过控制台中的网络加载选项进行了检查),但在Android平板电脑上却不这样做(这是我在使用该字体后再创建了div时进行了检查的选项家庭黑玫瑰(
1回复

字体家族未在Android设备上显示

我在ionic1应用程序中使用了“ Century Gothic”字体,但该字体显示在浏览器中,而不是Android设备中。请帮助!!! 我尝试了这个:
1回复

Google Web Fonts在使用高棉语的Android 4.2.2上不起作用

我正在尝试在Android中显示高棉语。 在Android版本4.1.2和4.4+中,高棉语工作正常。 但是在Android 4.2.2版中,甚至不会显示任何高棉语甚至一个字符。 我收到一个空白文本。 这是使用Google网络字体的高棉语言的示例: http : //www.goog
1回复

@ font-face无法在Chrome for Android上运行

我正在尝试在移动网络应用程序中使用@ font-face,而且它不适用于Android版Chrome 。 这是工作在以下方面: iOS上的Safari 默认Android浏览器 OSX上的Safari Chrome上的Windows Windows
1回复

Phonegap:自定义字体不起作用

我正在使用自定义字体样式在PhoneGap中执行应用程序。 字体样式是在浏览器中,而不是在Android手机中。 我检查了字体路径,它是正确的还在浏览器中检查控制台。 我发现没有错误。 提前致谢