create-react-appベースのプロジェクトにフォントを追加するにはどうすればよいですか？

debugcn 投稿 Dev

マキシムエクスチェンジ：

私が使用しています反応するアプリを作成し、したくありませんeject。

@ font-faceを介してインポートされ、ローカルにロードされたフォントをどこに置くべきかは明確ではありません。

つまり、ロードしています

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}

助言がありますか？

-編集

ダンが回答に言及した要点を含める

➜  Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
-rwxr-xr-x@ 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
-rwxr-xr-x@ 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT.woff
➜  Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
.GameModule {
  padding: 15px;
}

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff') format('woff');
}

そしてアブラモフ：

2つのオプションがあります。

インポートの使用

これは推奨されるオプションです。これにより、フォントがビルドパイプラインを通過し、コンパイル中にハッシュが取得されるため、ブラウザーのキャッシュが正しく機能し、ファイルが見つからない場合はコンパイルエラーが発生します。

「追加画像、フォント、およびファイル」で説明した、あなたはJSからインポートCSSファイルを持っている必要があります。たとえば、デフォルトでは次のようにsrc/index.jsインポートされますsrc/index.css。

import './index.css';

このようなCSSファイルはビルドパイプラインを通過し、フォントや画像を参照できます。あなたがフォントを入れている場合たとえば、src/fonts/MyFont.woffあなたindex.cssかもしれないが、これを次のとおりです。

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

で始まる相対パスを使用していることに注目してください./。これは、ビルドパイプライン（Webpackを利用）がこのファイルを見つけるのに役立つ特別な表記です。

通常はこれで十分です。

`public`フォルダを使用する

何らかの理由でビルドパイプラインを使用せず、代わりに「クラシックな方法」で実行する場合は、publicフォルダーを使用してそこにフォントを配置できます。

このアプローチの欠点は、本番用にコンパイルするときにファイルがハッシュを取得しないため、ファイルを変更するたびにファイルの名前を更新する必要があります。そうしないと、ブラウザーが古いバージョンをキャッシュします。

この方法で実行する場合は、フォントをpublicフォルダーのどこかに配置します（例：）public/fonts/MyFont.woff。このアプローチに従う場合は、CSSファイルpublicもフォルダーに入れ、JSからインポートしないでください。これらのアプローチを混在させると非常に混乱するためです。したがって、それでも実行したい場合は、のようなファイルが作成されますpublic/index.css。<link>このスタイルシートに手動で追加する必要がありますpublic/index.html：

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

その中で、通常のCSS表記を使用します。

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}

fonts/MyFont.woffパスとして使用していることに注意してください。これは、index.cssがpublicフォルダー内にあるため、パブリックパスから提供されるためです（通常はサーバールートですが、GitHub Pagesにデプロイしてhomepageフィールドをhttp://myuser.github.io/myprojectに設定した場合は、から提供されます/myproject）。ただしfonts、publicフォルダにもあるため、fonts比較的（http://mywebsite.com/fontsまたはのいずれかhttp://myuser.github.io/myproject/fonts）から提供されます。したがって、相対パスを使用します。

この例ではビルドパイプラインを回避しているため、ファイルが実際に存在するかどうかは検証されないことに注意してください。これが、私がこのアプローチを推奨しない理由です。もう1つの問題は、index.cssファイルが縮小されず、ハッシュも取得されないことです。そのため、エンドユーザーにとっては遅くなり、ブラウザが古いバージョンのファイルをキャッシュするリスクがあります。

どちらの方法を使用しますか？

最初の方法（「インポートの使用」）に進みます。それはあなたがしようとしたことなので（コメントで判断して）、2番目の1つだけを説明しましたが、多くの問題があり、いくつかの問題を回避するときの最後の手段にすぎません。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-04-7

コメントを追加

サインイン

分類Dev

Related 関連記事

記事