create-react-app でフォントを排出せずに効果的に管理するにはどうすればよいですか?

create-react-app でのフォントの管理

イジェクトせずに create-react-app を使用する場合、@font 経由でインポートされたフォントの配置-顔が混乱する可能性があります。考慮すべき 2 つのオプションは次のとおりです。

インポートの使用

これは、フォントをビルド パイプラインに統合し、正しいブラウザ キャッシュとコンパイル エラーを保証するため、推奨されるアプローチです。ファイルがありません。 JavaScript ファイルから CSS ファイルをインポートします (src/index.js import src/index.css など)。 CSS ファイル内で、src/fonts ディレクトリ内のフォント ファイルへの相対パスを使用して @font-face ルールを定義します。例:

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

パブリック フォルダーの使用

この方法は推奨されませんが、パブリック フォルダー (例: public/fonts/MyFont.woff) にフォントを配置する必要があります。この場合は、パブリック フォルダーに CSS ファイル (public/index.css など) を作成し、そのファイルへのリンクを public/index.html に手動で追加します。 CSS ファイル内では、public/fonts ディレクトリ内のフォント ファイルへの相対パスを指定した通常の CSS 表記を使用します。例:

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

ただし、この方法には、ハッシュの欠落や縮小化などの欠点があり、

推奨事項

最初の方法である「インポートの使用」は、ビルド パイプライン内でフォントを適切に処理できるため、推奨されます。潜在的な問題を回避します。

以上がcreate-react-app でフォントを排出せずに効果的に管理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。