使用p5.js的loadFont()加载目录TTF字体失败的问题求助

以下是可能导致你加载字体报错的原因及对应解决方法：

• 相对路径不匹配
  确认你的fonts文件夹与HTML文件的层级关系：

  • 如果HTML文件在项目根目录，fonts文件夹必须和它处于同一层级，路径fonts/NotoSerifArmenian-Thin.ttf才有效；
  • 如果HTML在子文件夹中，需要调整路径为../fonts/NotoSerifArmenian-Thin.ttf（根据实际层级修改../的数量）。

• 文件名或文件存在性错误
  检查fonts文件夹内确实存在NotoSerifArmenian-Thin.ttf文件，且文件名的大小写、符号、后缀完全和代码中的一致——p5.js对文件名大小写敏感，尤其是在非Windows系统下。

• 本地运行的跨域限制
  直接用file://协议打开本地HTML文件时，部分浏览器会限制加载本地资源，引发字体加载失败。解决方法是用本地服务器运行项目：

  • Python3用户可在项目根目录执行命令：python -m http.server，然后通过http://localhost:8000访问；
  • Node.js用户可先安装http-server（npm install -g http-server），再执行http-server，通过提示的本地地址访问。

• 字体文件本身问题
  部分特殊字体可能存在格式不兼容的情况，可以先测试你注释掉的Abel-Regular.ttf：将它放入fonts文件夹，修改代码加载该字体，若能成功则说明原字体文件可能存在问题，需要更换或重新下载。

• 缓存或库加载问题
  虽然你已正确引入p5.dom.min.js，但可尝试强制刷新浏览器缓存（Ctrl+F5），确保库文件和字体文件都被重新加载。

内容的提问来源于stack exchange，提问作者Carol.Kar