在uniapp中添加第三方阿里普惠字体发生错误

Question

在uniapp中添加第三方阿里普惠字体发生错误（已经用https://transfonter.org/转成woff2文件了）

Answer 1

以下内容由CHATGPT及笑面虎共同生成、有用望采纳：

---

您想要解决的问题： 您想要解决的问题是在uni-app项目中添加第三方阿里普惠字体时遇到的错误。具体来说，错误提示表明字体资源加载失败，并且服务器响应了500内部服务器错误。

图片内容：

1. 第一张图片显示了错误信息，包括“Failed to load local font resource”和“the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)”。
2. 第二张图片展示了CSS中的@font-face规则，其中尝试加载AlibabaPuHuiTi-Regular.woff2字体文件。

问题出现原因： 问题可能出现的原因有：

• 字体文件路径不正确，导致无法加载。
• 字体文件没有正确上传到服务器，或者服务器上的文件路径有误。
• 服务器配置问题，导致500内部服务器错误。

问题解决方案：

1. 检查字体文件路径：确保@font-face规则中的src属性指定的路径是正确的，并且该路径在服务器上是可访问的。
2. 验证字体文件：确认AlibabaPuHuiTi-Regular.woff2文件已经上传到服务器，并且没有损坏。
3. 检查服务器配置：500错误通常是服务器端的问题，需要检查服务器的配置，确保服务器能够正确地提供字体文件。
4. 使用绝对路径：尝试使用绝对路径而不是相对路径来引用字体文件。

提供代码： 如果字体文件已经上传到服务器的/static/fonts/目录下，您的@font-face规则应该是正确的。但如果路径有误，您需要修正它。例如，如果字体文件位于不同的目录，您需要更新src的URL。

@font-face {
  font-family: 'AlibabaPuHuiTiRegular';
  src: url('/static/fonts/AlibabaPuHuiTi-Regular.woff2') format('woff2');
}

代码运行方式：

1. 确保您的开发环境已经安装了Node.js和npm。
2. 在项目的根目录下运行npm install来安装依赖。
3. 运行开发服务器，通常是通过npm run serve或者其他uni-app提供的命令。

代码预期运行结果： 如果一切配置正确，您应该能够在应用中看到阿里普惠字体被正确加载和显示，且控制台中不会再出现之前的错误信息。

推荐相关链接：

• uni-app官方文档
• W3Schools CSS @font-face
• MDN Web Docs on @font-face
• HTTP Status 500