首页  >  文章  >  web前端  >  如何在不弹出的情况下向 Create-React-App 项目添加字体?

如何在不弹出的情况下向 Create-React-App 项目添加字体?

DDD
DDD原创
2024-11-05 15:50:02156浏览

How to Add Fonts to Create-React-App Projects Without Ejecting?

向基于 create-react-app 的项目添加字体而不弹出

使用构建管道是向 create-react-app 项目添加字体的推荐方法。这可以确保正确的处理、浏览器缓存的哈希值以及编译错误检测。

  1. 使用导入:

    • 从以下位置导入 CSS 文件JS,如src/index.css来自src/index.js.
    • 使用相对路径引用 CSS 文件中的字体,例如:

  2. 使用公共文件夹(不推荐):

    • 将字体放置在 public/fonts/MyFont.woff 中。
    • 在 public 文件夹中创建 CSS 文件,例如 public/index.css。
    • 添加此 CSS 文件的链接public/index.html:

    • 使用相对路径 fonts/MyFont.woff 在 CSS 文件中引用字体。

注意不建议使用公用文件夹方法,因为它不能确保正确的处理、散列或错误检测。它还更容易出现缓存问题。

无论采用哪种方法,您都需要使用受支持的格式的字体,例如 WOFF、WOFF2 或 TTF。

以上是如何在不弹出的情况下向 Create-React-App 项目添加字体?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn