問題タブ [woff2]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

58 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
1 に答える
363 参照

css - /icons/icomoon.woff ファイル 404 が Cloudways に見つかりません

404 エラーが返されるため、本番環境で icomoon アイコンが表示されません。

GET /icons/icomoon.woff net::ERR_ABORTED 404 (見つかりません)

GET /icons/icomoon.woff2 net::ERR_ABORTED 404 (見つかりません)

ファイルは正しいルートにあります: public/icons

public/icons/style.css に次のコードがあります。

私はこのようにsrcを入れようとしました：

しかし、うまくいきませんでした。

また、次のコードを public/web.config に配置しようとしました。

また、機能しません。

0 投票する
0 に答える
265 参照

font-face - アイコンのフォント - 一部のデバイスで四角形を示す WOFF2 ☒

IcoMoon を使用してアイコン Web フォントを生成し、FontSquirrel を使用して TTF ファイルを WOFF および WOFF2 ファイルに変換しました。

WOFF ファイルは IE ユーザーが使用し、WOFF2 は他のすべてのブラウザーで使用されます。

FontSquirrel でこれらの設定を使用しました。

  • Truetype ヒント: 既存のものを保持
  • レンダリング: GASP テーブルを修正
  • 垂直指標: 垂直指標の自動調整
  • 不足しているグリフの修正: スペース、ハイフン
  • エックスハイトマッチング: なし
  • サブセット化: サブセット化なし
  • 詳細オプション - Em Square 値: 2048; グリフ間隔の調整: 0

私が持っているすべてのデバイスとブラウザー (Windows、Linux、Android、iPhone、すべてのブラウザー) でテストしたところ、WOFF2 ファイルは完全に機能しました。
Apache は で応答しContent-Type: font/woff2、CORS の問題はありません。

ただし、一部のユーザーは、サイト上のすべてのアイコンが十字 (☒) の付いた四角形として表示されていると報告しています。
問題を報告したユーザーは以下を使用しています:

  • Android 9 の Chrome v84 (Huawei Y6 2019)
  • Android 8 (Samsung Galaxy S7) 上の Chrome v89

@font-face代わりに WOFF ファイルを使用するように変更すると、これは解決されました。

同様の方法で WOFF2 と共に提供される Google フォント (自己ホスト型) もいくつか持っています。これらのフォントは、上記の問題を報告したユーザーのデバイスでうまく機能します。

一部のデバイスで、自己ホスト型の Google フォント WOFF2 が機能するのに、生成したアイコン/グリフ WOFF2 ファイルが機能しない理由はありますか?


12345678910