ホームページ >ウェブフロントエンド >CSSチュートリアル >ブートストラップ アイコンの読み込みがローカルとオンラインで一貫性がないのはなぜですか?
ブートストラップ アイコンの読み込みの不一致: ローカルとオンライン
この質問では、ブートストラップ アイコンがローカルで読み込まれるのに、Web サイトがオンラインでホストされています。ユーザーが表示する HTML スニペットでは、ブートストラップ グリフィコン アイコンが付いたボタンがローカルでは正しく表示されますが、Windows Azure に展開すると誤ったプレフィックスが表示されます。
調査により、この問題はブラウザーが試行する異なるファイル パスに起因することが判明しました。からアイコンをロードします。ローカルでは、ファイルは /Content/fonts/glyphicons-halflings- Regular.woff から正しくロードされますが、オンラインでは /fonts/glyphicons-halflings- Regular.woff からロードしようとします。
これを解決するには、ユーザーは、ローカル環境とオンライン環境の両方で標準のブートストラップ ファイルと同一の Web サイト構成を使用していることに気づきました。また、CSS バンドル コードとファイル構造も提供しています。
この問題の解決策は、MetroUI で発生した同様の問題から生まれます。 CSS ファイルをバンドルすると、Windows Azure のフォント読み込みメカニズムが中断される可能性があることが判明しました。
具体的には、元のバンドル名はアプリケーション ルートの /fonts ディレクトリを参照していましたが、バンドル後には存在しませんでした。ファイル構造を正確に反映するようにバンドル名を変更すると問題が修正され、ブラウザーがローカルとオンラインの両方で正しい場所からフォントを読み込むようになりました。
以上がブートストラップ アイコンの読み込みがローカルとオンラインで一貫性がないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。