Create-React-App プロジェクトにカスタム フォントを追加するにはどうすればよいですか?

Create-React-App プロジェクトへのフォントの追加

インポートを使用する

この推奨方法では、ビルド パイプラインにフォントが組み込まれます。これを実現するには:

• JS から CSS ファイルをインポートします (例: import './index.css')。
• で始まる相対パスを使用して CSS ファイル内のフォントを参照します。 / (例: @font-face { src: local('MyFont'), url(./fonts/MyFont.woff) }).

パブリックフォルダーを利用する

別の方法として、パブリック フォルダー内のフォントを手動で管理することもできます。

• パブリック フォルダー内の場所 (例: public/fonts/MyFont.woff) にフォントを配置します。
• <リンク>を追加します。 public/index.html から CSS ファイルに追加します (例: )。
• フォントを参照するには通常の CSS 表記を使用します。 CSS ファイル内で相対パスを考慮します (例: @font-face { src: local('MyFont'), url(fonts/MyFont.woff) })。

推奨事項

「インポートの使用」方法を選択すると、次の利点があります:

• ビルド パイプライン統合
• ブラウザ キャッシュのハッシュ
• 欠落ファイルによるコンパイル エラー

以上がCreate-React-App プロジェクトにカスタム フォントを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。