6

Phonegap を使用してアイコン付きのカスタム ボタンを作成しようとしています。

https://github.com/topcoat/iconsと www.icomatic.io を使用してアイコンを作成しました。次に、結果の icomatic ファイルを www/css/icomatic フォルダーに保存しました。

何らかの理由で、次のコードは通常の (クロム) Web ブラウザーでは機能します (アイコンを表示します) が、携帯電話では機能しません (カメラという単語のボタンが表示されるだけです)。

<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デバイスでは、カメラアイコンは正常に表示されました..

4

2 に答える 2

2

icomatic.css ファイルの先頭で、font-face 定義を最初に 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');
}
于 2014-03-26T14:09:31.450 に答える
0

私も同じ問題を抱えていました。次に、zip 内の icomatic のフォントに付属する icomatic.html ファイルの下部にある、Icomatic ドキュメントの FAQ を読みました。彼らは、Javascript スクリプト icomatic.js が、@font-face と合字を完全にサポートしていないブラウザーにフォールバックを提供すると述べています。

したがって、HTML ページで既に言及されている既存の構成に追加する必要があります。

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

あるページでは、このフォールバックが機能しなかったため、前に html ページの終わりがありました。

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

これで、Android Kitkat と Jelly Bean で動作する icomatic アイコン コレクションができました。Android 1以降もサポートしていることを象徴的に言及し、CupCakeとしましょう！および iOS 3 以降。

于 2014-06-03T11:54:12.830 に答える