問題が発生しました: Web アプリケーションでのカスタム WOFF フォントのレンダリング中にエラーが発生しました
<p>現在、Web アプリケーションを開発しており、CSS の @font-face ルールを使用して特定の要素にカスタム フォントを実装しようとしています。フォントを定義して特定の要素に適用するという標準的なプロセスに従いましたが、フォントを正しくレンダリングできません。 </p>
<p>使用した関連コードは次のとおりです。</p>
<pre class="brush:php;toolbar:false;">@font-face {
フォントファミリー: スワイパーアイコン;
フォントスタイル: 通常;
フォントの太さ: 400;
src: url('data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAZgABAAAAAD...'); /* 残りの Base64 エンコードされたフォント データ */
}
.my-カスタムフォント {
フォントファミリー: "スワイパーアイコン"、サンセリフ;
}</pre>
<p>base64 文字列をデコードし、拡張子 .woff を付けてフォント ファイルを保存しました。ただし、my-custom-font クラスを要素に適用すると、フォントが期待どおりにレンダリングされないようです。オンライン フォント レンダリング ツール (https://fontdrop.info) を使用してフォントをプレビューしようとしましたが、それも機能しませんでした。 </p>
<p>調べて試したこと:</p>
-
<li>base64 文字列全体が正しくデコードされていることを確認しました。 </li>
<li>フォント ファイルが有効な形式で保存されたことを確認しました。 </li>
<li>CSS で正しいフォント ファミリ名 (「swiper-icons」) を使用しました。 </li>
<li>ブラウザのコンソールを確認しましたが、フォントの読み込みやレンダリングに関連するエラー メッセージはありませんでした。 </li>
</ul>
<p>何か見落としたり間違ったりしたことはありますか?フォントが正しくレンダリングされることを確認するために追加の手順が必要ですか?特定のフォント形式またはオンライン レンダリング ツール間に互換性の問題が発生する可能性はありますか?このフォント レンダリングの問題を解決する方法についてご指導いただき、誠にありがとうございます。 </p>
