WoffフォントがFirefoxにぶら下がっているのはなぜですか

Firefoxの問題の問題の問題

トラブルシューティング

ChromeとIE9で正しく動作しているにもかかわらず、FirefoxにローカルのOswald Woffフォントをロードするのが困難に遭遇しました。 ブラウザのネットワークタブは、吊り下げと中止されたリクエストを明らかにしました。

なぜwoff？

woff（Web Open Font Format）には、いくつかの利点があります：

• 圧縮：
ファイルサイズが小さく、圧縮されていないTrueTypeまたはOpentypeフォントと比較して、帯域幅の消費量が短縮され、帯域幅の消費量が減少します。
• ライセンス：WOFF形式のフォントのみをライセンスするため、Webデザイナーのフォントの可用性を拡張します。
• 幅広いブラウザのサポート：ブラウザ全体の普遍的な互換性を目指しています Firefoxの問題のデバッグ

Woffに関するMozillaの文書は役に立たなかった。 Firefox 3.6が

を介してWoffをサポートしていると主張している間、私の実装は失敗しました。 Apacheのファイル（

）のMIMEタイプを定義し、キャッシュヘッダーを追加するための提案は問題を解決しませんでした。 @font-faceおよびMozilla HacksブログもWoffのサポートを示し、さらに混乱を招きました。 他の投稿で提案されているように、TTFフォールバックフォント（.htaccess）を追加することも効果がありませんでした。 JavaScriptロード（Google Web Fonts APIを使用）は機能しましたが、ローカルに指定されたフォントの吊り下げリクエストを残しました。 有効期限ヘッダーを備えたEOTおよびTTFフォントのものを含むMIMEタイプを追加すると、部分的な成功が得られましたが、いくつかのWOFFリクエストがぶら下がっていました。 ファイルが欠落しているためではありません。フォントが存在していました。AddType application/x-font-woff .woff caniuse.comcss：url(fonts/GenR102.ttf) format("truetype") .htaccess私のCSSには、異なるオスワルドフォントウェイトの個別の

宣言が含まれていました（太字、光、レギュラー）：

@font-face

<code class="language-css">@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: local('Oswald Bold'), local('Oswald-Bold'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: local('Oswald Light'), local('Oswald-Light'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}

/* custom font */
h1 {
   font-family: 'Oswald', sans-serif; 
}</code>

残りのハンギングリクエストは、Firefoxが異なるフォントウェイトの複数のWoffファイルを処理したことによる可能性があります。 正確な原因を特定するには、さらなる調査が必要です

Woff Fontsに関するよくある質問

（このセクションは、個別のFAQセクションであり、トラブルシューティングの問題のコンテキストのために書き換えを必要としないため、元の入力から変更されません。）

Woff形式と他のフォント形式の違いは何ですか？

Woff、またはWeb Open Font形式は、Mozilla、Type Supply、およびLetterRorによって開発されたWebフォント形式です。 TrueType、Opentype、およびOTFで使用される同じテーブルベースのSFNT構造の圧縮バージョンを使用しているが、メタデータとプライベート使用データ構造を追加するため、ユニークです。これにより、フォントを小さくし、Webページでより速く読み込むことができます。他の形式とは異なり、Woffはすべての主要なブラウザによってサポートされています。

フォントをwoffに変換するにはどうすればよいですか？

フォントをWoffに変換することは、TransFonterやFont Sirrelのジェネレーターなどのオンラインツールを使用して実行できます。フォントファイルをアップロードし、変換する形式を選択し、変換されたファイルをダウンロードするだけです。コンバージョンやWebの使用を許可しない場合があるため、変換する前にフォントのライセンスを確認することを忘れないでください。

なぜ私のWoffフォントがFirefoxで正しく表示されないのですか？WoffフォントがFirefoxで正しく表示されていない場合、いくつかの理由が原因である可能性があります。まず、フォントがCSSに適切にロードされているかどうかを確認します。もしそうなら、ブラウザのキャッシュをクリアするか、Firefoxの追跡保護によってフォントがブロックされているかどうかを確認してください。問題が続く場合、それはFirefoxのWoffフォントのレンダリングのバグによる可能性があります。 Woff FontsをWoff Fontsを使用するにはどうすればよいですか？

WoffフォントをWoffフォントを使用するには、最初に @font-faceルールを使用してCSSでそれらを宣言する必要があります。次に、フォントファミリープロパティを使用して、ページの要素にフォントを適用できます。 WOFFフォントがロードに失敗した場合に備えて、フォールバックフォントを含めることを忘れないでください。

Woffフォントはすべてのブラウザーと互換性がありますか？

Woffフォントは、Chrome、Firefox、Safari、Edgeなど、すべての最新のブラウザーによって広くサポートされています。ただし、これらのブラウザまたは他のあまり一般的でないブラウザの古いバージョンの場合、CSSにフォールバックフォントを含める必要がある場合があります。

商用プロジェクトにWoffフォントを使用できますか？

商用プロジェクトにWoffフォントを使用できるかどうかは、フォントのライセンスに依存します。一部のフォントは個人的および商業用に無料で無料で、他のフォントは商業使用のためのライセンスを必要とする場合があります。プロジェクトにフォントを使用する前に、必ずライセンス情報を確認してください。

Woffフォントを使用することの利点は何ですか？

woffフォントにはいくつかの利点があります。サイズは小さいため、Webページでより速く読み込まれます。また、すべての主要なブラウザによってサポートされているため、Webデザインの信頼できる選択肢となっています。さらに、WOFFフォントには、メタデータとプライベート使用データ構造を含めることができます。これは、フォントデザイナーとユーザーに役立ちます。

パフォーマンスを向上させるためにWoffフォントを最適化するにはどうすればよいですか？

Woffフォントを最適化するには、パフォーマンスを向上させるには、フォントサブセットを使用して、必要な文字のみを含めることができます。これにより、フォントのファイルサイズが縮小され、ロードが速くなります。また、フォントディスプレイやフォントロードAPIなどのフォントロード戦略を使用して、フォントのロードと表示方法を制御することもできます。

独自のWoffフォントを作成できますか？

はい、独自のWoffフォントを作成できます。 FontforgeやGlyphsなどのソフトウェアを使用して独自のフォントを設計し、オンラインツールまたはソフトウェアを使用してWOFFに変換できます。さまざまなブラウザでフォントの互換性とパフォーマンスを確認してください。

Woff2とは何ですか？woffとはどう違うのですか？

Woff2は、Web Open Fontフォーマットの2番目のバージョンです。 Woffよりも優れた圧縮を提供し、ファイルサイズが小さく、負荷時間が短くなります。ただし、Woffほど広くサポートされていないため、フォントのWoffバージョンをフォールバックとして含める必要がある場合があります。

以上がWoffフォントがFirefoxにぶら下がっているのはなぜですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。