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

Question

我正在尝试使用 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)上

在我试过的另一台安卓设备上，相机图标正常显示..

Answer 1

在 icomatic.css 文件的顶部，当我更改字体定义以首先使用 SVG 格式时，它解决了问题。我猜 EOT 字体在 Android 4.3 上还没有完全支持。

@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');
}