フォントを取り出さずに Create-React-App プロジェクトに追加する方法

取り出しを行わずに create-react-app に基づいてプロジェクトにフォントを追加する

create-react-app プロジェクトにフォントを追加するには、ビルド パイプラインの使用が推奨される方法です。これにより、適切な処理、ブラウザ キャッシュのハッシュ、コンパイル エラー検出が保証されます。

1. インポートの使用:

   • CSS ファイルをインポートします。 JS (src/index.js の src/index.css など)。

   • 次のような相対パスを使用して CSS ファイル内のフォントを参照します。

     <code class="css">@font-face {
       font-family: 'MyFont';
       src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
     }</code>

2. パブリック フォルダーの使用 (非推奨):

   • フォントを public/fonts/MyFont.woff に配置します。
   • 作成パブリック フォルダー内の CSS ファイル (public/index.css など)。

   • この CSS ファイルへのリンクを public/index.html に追加します:

     <code class="html"><link rel="stylesheet" href="%PUBLIC_URL%/index.css"></code>

   • 相対パス fonts/MyFont.woff を使用して CSS ファイル内のフォントを参照します。

パブリック フォルダー方式の使用は、適切な処理が保証されないため推奨されないことに注意してください。 、ハッシュ化、またはエラー検出。また、キャッシュの問題が発生しやすくなります。

方法に関係なく、WOFF、WOFF2、TTF などのサポートされている形式のフォントが必要です。

以上がフォントを取り出さずに Create-React-App プロジェクトに追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。