Create-React-App でフォントを取り出さずに使用する方法

排出せずに Create-React-App プロジェクトにフォントを組み込む方法

排出せずに create-react-app プロジェクトでフォントを利用するには取り出しが必要な場合は、主に 2 つのオプションが利用可能です。

方法 1: インポートを利用する

このアプローチには、CSS ファイルを JavaScript コードにインポートすることが含まれます。デフォルトでは、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 ディレクトリに置きます:

public/fonts/MyFont.woff

パブリック フォルダーに CSS ファイル (public/index.css など) を作成し、public/index.html に手動でリンクします:

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

public/index.css 内:

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

推奨事項

インポートを活用する最初の方法は、へのアクセスを許可するため、強く推奨されます。フォントがビルド パイプラインを確実に通過すること、ブラウザーを効率的にキャッシュするためにコンパイル中にハッシュを取得すること、ファイルが存在しない場合にコンパイル アラートを受信することなどの機能があります。

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