firefox(ff)_html/css_WEB-ITnose でブートストラップアイコンが表示できない問題の解決方法

最近、ブートストラップに基づいたプロジェクトで問題が発生しました。問題は、ブートストラップに付属する「グリフィコン」と呼ばれるアイコンのセットが、16 進数のように見える 4 つのアイコンを表示できないことです。写真に示すように、文字がぼんやりと見えます。既製の良いアイコンが使用できないのは悲しいですね〜

しかし、Chrome と IE 10 では正常に表示されるため、この問題は不適切な使用や関連ファイルの保存場所の間違いによって引き起こされたものではないことがわかります。さらに、同じバージョンのブートストラップに基づく別のプロジェクトではこの問題に遭遇しませんでした。奇妙な~~

そこで、問題に遭遇したすべての友人の参考のためにインターネットで解決策を探し、ここで共有しました。 ff アドレスバーに「about:config」と入力して、設定インターフェイスに入ります。内部に入ったら、「security.fileuri.strict_origin_policy」を検索します。これは true である必要がある値です。項目をダブルクリックすると、その値が自動的に false に変更されます。変更後、問題が発生したページを更新すると、アイコンが正常に表示されるようになります。

では、この問題の原因は何でしょうか？原因はffのセキュリティポリシーにあります。このポリシーは、HTML ファイルがルート ディレクトリにないフォルダー内の Web フォントにアクセスすることを制限します。この制限はローカル開発環境でのみ発生し、Web フォントはリモートでは取得されません。

その後、前述のブートストラップ プロジェクトを確認しましたが、問題はありませんでした。案の定、そのフォント フォルダーはプロジェクトのルート ディレクトリに配置されました。これにより、上記のセキュリティポリシーを変更しなくても正常に表示できるようになります。