web-dev-qa-db-ja.com

Firefoxで素晴らしいフォントが機能しない

私はbootstrap=を使用していて、GlyphiconsをオーバーライドしてLessで素晴らしいフォントを追加しました。アイコンは、chromeでOKを表示します。

これは私のディレクトリがどのように見えるかです

-- Project
  -- js
  -- css
  -- less
  -- font-awesome
    -- css
    -- font
    -- less

Project > less > boostrap.lessファイルで変更したのは次のとおりです。

@import "sprites.less";

//for this line

@import "../font-awesome/less/font-awesome.less";

Chromeで申し上げましたが、何らかの理由でFirefoxはボックスのみを表示します。

firefoxtwitter-bootstraplessfont-awesome
20
filistea

CDN経由のカスタムWebフォント（またはクロスドメインフォントリクエスト）は、Webkitベースのブラウザーでは（正しく）動作しますが、FirefoxまたはInternet Explorerでは正しく動作しません（仕様により正しく動作します）。

これを修正するには、ページにヘッダーを追加します。

アパッチ

    <FilesMatch ".(eot|ttf|otf|woff)">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>

Nginx

    if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
        add_header Access-Control-Allow-Origin *;
    }

クレジット： http://davidwalsh.name/cdn-fonts

27
Dustin Brownell

Font-awesomeを迅速かつ簡単に動作させる方法が必要な場合は、 [〜＃〜] cdnjs [〜＃〜] を使用してみてください。無料で、CloudFlareを使用しています。 CORSは標準でサポートされています。

次のようなものを試してください：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">
24
premjg

S3でフォントをホストしている場合、バケットで CORSを有効にする にする必要があります。 AWSマネジメントコンソールを使用して、バケットのプロパティを編集し、[アクセス許可]で[CORS設定の追加]をクリックします。私の場合、デフォルトの設定のままにすると、まだ機能しなかったため、次のように変更しました。

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>
10
Ruy Diaz

$ filename変数がないため、ifステートメントに問題がありました。

しかし、次を使用して同様の結果が得られました。

location ~ /\.(eot|otf|ttf|woff)$ {
        add_header Access-Control-Allow-Origin *;
    }
6
fyberoptik

Premjgが推奨するようにCDNを使用することは、CDNを自分でホストする以外に最も侵襲性の低い方法です。 fontawesomeの最新バージョン bootstrapcdnを推奨 、例えば、

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

マイナーノートとして、noscriptは、ホワイトリストに登録されていない限り、CDNへのリクエストをサイレントにブロックします。and同じドメインからのファイル。

4
A Lee

あなたが私と同じなら、web.configファイルを変更することはあなたが触れてはいけないことです。

すべてのフォントファイル（.eot、.ttfなど）を独自のローカルフォルダーに保存し、FontAwesome CDNではなくローカルにリンクしてみてください。 IEとFFで毎回クリアしました。

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }
1
OneMohrTime

コードを.htaccessに入れました

<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

現在は正常に動作しています。ありがとう。あなたの助けに感謝

1
user3610713

wordpressを使用していて、すべてを試したことがあると思う場合は、Font Awesome plugin。をインストールしたかどうかを確認してください。 。

これが私にとっての解決策でした-プラグインの古いバージョンのfont-awesomeは、自分で手動で更新しようとしていたファイルを上書きしていました。

0
bkbeachlabs

フォントフォルダに次のファイルをアップロードしてください

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------重要なグリフィコンファイル--------------- -
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

次のファイルをアップロードしてから、ヘッダーファイルでfont-awesome.min.cssをリンクしてください。

適切なファイルを使用した次のリンクを次に示します。 http://goo.gl/WICQAf

0
Subhojit Mondal