android - -phonegap- Icomatic Topcoat图标在Chrome中呈现，但在Android中不呈现

我正在尝试使用Phonegap创建一个带有图标的自定义按钮。

我使用https://github.com/topcoat/icons和www.icomatic.io来创建图标。
然后，将生成的icomatic文件保存在www/css/icomatic文件夹中。

由于某些原因，以下代码在我的普通(chrome)网络浏览器中有效(显示图标)，但在我的手机上不起作用(它仅显示带照相机字样的按钮):

<button class="topcoat-icon-button" id="takePicture">
    <span class="topcoat-icon icomatic">camera</span>
</button>

我在wwww/css/icomatic.css文件夹中使用icomatic.css。 CSS是:

src: url('icomatic.eot');
src: url('icomatic.eot?#iefix') format("embedded-opentype"),
     url('icomatic.woff') format("woff"),
     url('icomatic.ttf') format("truetype"),
     url('icomatic.svg#icomatic') format('svg');

像这样引用:

<link rel="stylesheet" type="text/css" href="css/icomatic/icomatic.css"/>

谢谢!

//编辑:
似乎此问题专门在某些设备/软件(Android 4.3，Xperia Z)上发生

在我尝试过的另一台android设备上，相机图标正常显示。

最佳答案

在icomatic.css文件的顶部，当我将字体定义更改为首先使用SVG格式时，它解决了该问题。我猜想Android 4.3尚不完全支持EOT类型的字体。

@font-face {
font-family: 'Icomatic';
src: url('icomatic.svg#icomatic') format('svg');
src: url('icomatic.eot?#iefix') format("embedded-opentype"),
     url('icomatic.woff') format("woff"),
     url('icomatic.ttf') format("truetype"),
     url('icomatic.svg#icomatic') format('svg');
}