如何在 create-react-app 中有效管理字体而不弹出？

在 create-react-app 中管理字体

使用 create-react-app 而不弹出时，通过 @font 导入的字体的位置- 脸可能会令人困惑。这里有两个选项需要考虑：

使用导入

这是推荐的方法，因为它将字体集成到构建管道中，确保正确的浏览器缓存和编译错误，如果文件丢失。从 JavaScript 文件导入 CSS 文件，例如 src/index.js 导入 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。在这种情况下，请在 public 文件夹中创建一个 CSS 文件，例如 public/index.css，并在 public/index.html 中手动添加指向该文件的链接。在 CSS 文件中，使用常规 CSS 表示法以及 public/fonts 目录中字体文件的相对路径，例如：

<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中文网其他相关文章！