14

Cordova/Phonegap を使用する Windows Phone 8 では、Font-face が機能しません。

標準の Cordova WP8 テンプレートを使用して、単純な font-face 定義を追加し、*そのフォントまたは wingding を使用するように設定しました (機能していないことを明確にするため)。

html

ファイルは/fontsフォルダー内にあり、「コンテンツ」および「常にコピー」としてビルドするように設定されています。

フォントの場所

（うわー、その画像は巨大です）

これを Chrome で実行すると、フォントが正しく読み込まれます。

フォントはクロムで動作します

IE10 (または IE9 モード) で実行しても、フォントは正しく読み込まれます。

フォントは IE10 で動作します

しかし、Windows Phone 8 シミュレーターで実行すると、次のように表示されます。

windowsphone8シミュレーター

何か案は？回避策は? 先に進んで橋から飛び降りるべきですか？

アップデート：

誰かが代わりに WOFF フォント形式を使用することを提案したので、 http: //www.font2web.com/ に行き、自分の TTF フォントを変換しました。新しいファイルを自分のwww/fonts/フォルダーにコピーしました。前と同じように、「ビルド アクション」が と に設定されていることを確認しましContentたCopy Always。

また、deviceReady イベントが発生した後にフォントを読み込もうとすることについて何かを読みました。試してみる価値はあります...何も傷つけることはできません。

これは、すべての可能な組み合わせで新しいフォントフェイスを定義する「fonts.css」と呼ばれる css ファイルです。

新しいCSS

次に、ストックを編集し、新しいものを deviceReady 後に DOM にjs/index.js動的にロードするスクリプトを追加しました。fonts.css

デバイス準備完了

ところで：ファイルの内容をDOMにロードするためにhttp://www.javascriptkit.com/javatutors/loadjavascriptcss.shtmlloadjscssfile()から入手した小さなスクリプトです。fonts.css

Internet Explorer 10/9、Chrome、Firefoxで確認しました。3 秒後にフォントが変わります。Windows Phone 8 シミュレーターで試してみました。3秒後、ウイングス。

4

4 に答える 4

10

css がローカルに保存されている場合(IsolatedStorage または XAP コンテンツ) 、css で定義されたフォント フェイスは機能しません。同様の問題がありましたが、WP WebBrowserControl チームからの応答は次のとおりです。

これは既知の問題であり、残念ながら、ページとリソースをリモートでホストする以外に既知の回避策はありません。

したがって、回避策として、css および html ファイルをリモート サイトでホストすることを試みることができますが、それは理想的ではないことを理解しています。

編集

また、次のことも試しました-wp8シルバーライトアプリにフォントをロードして、名前で（他のプリロードされたフォントとして）認識できるようにします。これはシルバーライトUIで機能しました-xamlから名前でこの新しいフォントを参照できましたが、残念ながらそうではありませんでしたウェブブラウザのコンテンツでは機能しません。

于 2013-01-31T11:34:11.340 に答える
6

base64 でフォントをエンコードして css ファイルに直接配置すると、WP8 アプリでも機能するように見えます。

IcomoonやFontsquirrelなどの Web アプリを使用すると、base64 文字列を含む css を簡単に生成できます。

于 2014-03-21T13:46:46.137 に答える
1

私は同じ問題を抱えていたので、回避策は次のとおりです。私はsencha touchを使用しているため、2つの別々のcssファイルがあります。アイコン要素の場合、追加のクラス win を追加し、Windows css に追加しました

.list.win {
  background-image: url('data:image/png;base64,IMAGECODE HERE');
}

まあそれはおそらく愚かですが、それでもうまくいきます。

PS: 私の解決策は、フォントをアイコンとして使用する場合です。

于 2013-11-10T12:51:41.877 に答える