web-dev-qa-db-ja.com

FontAwesomeがWindowsPhone8に表示されない

アイコンの表示にFontAwesomeフォントを使用するテストサイトがあります。

アイコンは、IEとChromeのデスクトップ、およびiPhoneとAndriodモバイルデバイスで正常に表示されます。

ただし、Nokia Lumia 920 Windows Phone8ではフォントアイコンは表示されません。

何が問題を引き起こしているのか理解できません。 Font Awesomeアイコンフォントを使用している他のサイトは、Nokia Lumia 920 WindowsPhoneで正しく表示されます。したがって、私が作成したセットアップに固有の何かが必要です。

テストサイトは次のとおりです。 http://www-peachtreedata.azurewebsites.net/?page_id=6

これをWindowsPhoneプラットフォームで機能させる方法についてのアドバイスをいただければ幸いです。

csswindows-phone-8
18
Richard West

これは、観察された問題が実際の問題の症状にすぎない状況です。私は自分のサイトでも同じ問題を抱えていました。しかし、Windows Phoneの問題ではないことが判明しましたが、IIS 7-8.1はWebフォントファイルに対して間違ったMIMEタイプを提供します。フォントに対して正しいMIMEタイプが提供されていることを確認してください。ここに示すように、ファイル： フォントの適切なMIMEタイプ

また、フォントにWindows Azureストレージを使用している場合は、各ファイルのMIMEタイプを手動で設定する必要があります。既存のファイルに対してこれを行う最も簡単な方法は、そこにある多くのAzureストレージフロントエンドエディターの1つを使用することです。

HTH

7
Robert McLaws

Base64を使用して、フォント/アイコンセットをWindows Phone8で認識できるようにすることができました。次のようにWOFFおよびTTFフォントを使用していることを確認してください（ここで、*は長いbase64文字列です）。

@font-face {
    font-family: 'icomoon-ac';
    src: url(data:application/x-font-woff;charset=utf-8;base64,***) format('woff'),
        url(data:application/x-font-ttf;charset=utf-8;base64,***) format('truetype');
    font-weight: normal;
    font-style: normal;
}

UPDATE：このトピックはHacker Newsで再び取り上げられたので、他の人に役立つ場合に備えて、ここで元の投稿を詳しく説明します。1）icomoonだけを試しました。 2）埋め込みフォントを1つだけ使用しました。

現在IntelApp Frameworkと呼ばれているjqMobiを使用して、すべての主要なモバイルブラウザーを対象とするモバイルWebサイトを構築しています。 jqMobiフレームワークには、そのuiCSSに埋め込まれたicomoonからの最大70個のアイコンが含まれています。さらにいくつか必要だったので、最初はicomoon-extraという別のフォントファイルを作成して http://www.motobit.com/util/base64-decoder-encoderにアップロードすることで、それを拡張しようとしました。 asp を使用して、base64文字列を生成し、jqMobiCSSに別の@ font-faceを追加します。それは私にはうまくいかなかったので、jqMobi icomoonセレクションの元のアイコンのほとんどに加えて、必要な30個ほどのアイコンを含む新しいicomoon-acファイルを作成しました。今、私はフレームワークでicomoon-acフォントを使用するだけで、それは機能します。繰り返しますが、埋め込みフォントは1つだけです。

3
carrabino

CSS @font-faceは、Windows PhoneIEでは確実に機能しません。

Font Awesomeなどのアイコンフォントは、リモートサーバーから適切なフォントファイルをロードすることに依存しています。どうやら、WindowsPhoneでは@font-faceを使用して追加のフォントをロードすることはできません。ソースに応じて、これはWindows Phone 7のみ、またはバージョン8にも当てはまります。

  • Microsoft states Webフォントは7.1では機能しない
  • This SO thread 、and another one は7.5で問題を報告しますが、考えられる解決策へのヒントになるかもしれません
  • この投稿 のコメントでは、Base64でエンコードされたフォントでさえエミュレーターでは機能しないと述べられています。時間があれば、実際の電話（7.5）でテストします。
  • Modernizrでさえ これにはいくつかの問題があります

補足：私のWindows Phoneでは、Microsoft.comはスタックの2番目のフォントであるTahomaで表示されます。

 font-family: wf_SegoeUI, Tahoma, Verdana, Arial, sans-serif;

おかしい、Windows Phone Segoe UIのローカルコピーが利用可能 。なぜMSのウェブ関係者はその2番目をスタックに入れないのだろうか...

2
bhell

これは8.1アップデートで修正される可能性があります。

「InternetExplorerfor Windows Phone 8.1 Updateの時点で、WindowsPhoneのInternetExplorerでは、アクセス制御ヘッダーに関係なくクロスオリジンフォントの読み込みが可能であり、既存のサイトとの互換性が向上しています」 [1]

1
robocat

さて、これはIIS7.5で私のために働いたものです。 MIMEタイプ.otf、.svg、および.woffをIIS）に追加する必要がありました。これらはまだ存在していなかったため、IISに新しいMIMEタイプを追加するには、右のMIME typesモジュールをクリックします。 -クリックしてAdd...を選択します

    .eot -> application/vnd.ms-fontobject
    .otf -> application/font-sfnt
    .svg -> image/svg+xml
    .ttf -> application/font-sfnt
    .woff -> application/font-woff
1
Flo

@floによる回答と同様に、Windows Server2008R2のIIS7.5で次のmimeタイプが問題を修正していることを確認できます。

    .eot -> application/octet-stream
    .otf -> application/font-sfnt
    .svg -> image/svg+xml
    .ttf -> application/octet-stream
    .woff -> application/font-woff
0
Charles Robertson