6

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

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

4

2 回答 2

2

在 icomatic.css 文件的顶部，当我将 font-face 定义更改为首先使用 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');
}
于 2014-03-26T14:09:31.450 回答
0

我有同样的问题。然后我阅读了 Icomatic 文档的常见问题解答，该文档可在 icomatic.html 文件的底部访问，该文件随 Zip 中的 icomatic 字体一起提供。他们提到 Javascript 脚本 icomatic.js 为不完全支持 @font-face 和 ligature 的浏览器提供了回退。

因此，您应该添加到您的 html 页面中已经提到的现有配置：

<head>
...    
<script src="ico/icomatic.js"></script>
<script>
    window.onload = function() { IcomaticUtils.run(); }
</script>
...
</head>

对于一个页面，这个后备不起作用，所以我之前有一个 html 页面的结尾：

<script>
    IcomaticUtils.run();
</script>

现在我的 icomatic 图标集合在 Android Kitkat 和 Jelly Bean 上工作。Icomatic 提到他们甚至支持 Android 1+，比如说 CupCake！和 iOS 3+。

于 2014-06-03T11:54:12.830 回答