如何在 Create-React-App 中使用字体而不弹出？

如何在不弹出的情况下将字体合并到 Create-React-App 项目中

为了在不弹出的情况下在 create-react-app 项目中使用字体如果需要弹出，有两个主要选项可用：

方法 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

在 public 文件夹中创建一个 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中文网其他相关文章！