UniApp 全局使用字体教程

🌈 UniApp 全局使用字体教程

本文档将指导你如何在 UniApp 项目中引入自定义字体文件（如 幼圆.ttf），并实现全局页面统一使用该字体。

适用于 H5、App、微信小程序 等多端。

---

📁 一、准备字体文件

1. 将你的字体文件（例如 YouYuan.ttf）放入项目的静态目录：

   /static/fonts/YouYuan.ttf

2. ⚠️ 注意事项

   • 字体文件名不要使用中文或空格（推荐命名：YouYuan.ttf）；
   • 确保 /static/fonts/ 目录存在。

---

🧩 二、在全局样式中引入字体

打开项目根目录下的 App.vue 文件，在 <style> 中添加以下代码：

<style>
/* 1️⃣ 注册字体 */
@font-face {
  font-family: 'YouYuan';
  src: url('/static/fonts/YouYuan.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 2️⃣ 设置全局字体 */
html, body, page, view, text {
  font-family: 'YouYuan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
</style>

这段样式会使整个项目的文字都默认使用 幼圆字体。

---

🔗 三、路径写法说明

不同平台对字体路径解析略有差异：

平台	推荐写法
H5 / 小程序	url('/static/fonts/YouYuan.ttf')
App 端（真机）	url('@/static/fonts/YouYuan.ttf') 或相对路径写法

⚠️ 若 App 打包后字体未生效，请改用 @/static/fonts/YouYuan.ttf 写法。

---

🎨 四、仅在部分页面/组件使用（可选）

如果你只想让某个页面或组件使用幼圆字体，可以单独引入：

<template>
  <view class="custom-font">你好，UniApp！</view>
</template>

<style scoped>
@font-face {
  font-family: 'YouYuan';
  src: url('/static/fonts/YouYuan.ttf') format('truetype');
}

.custom-font {
  font-family: 'YouYuan';
}
</style>

---

⚙️ 五、App 打包后字体不生效的排查

如遇到 App 端字体未生效，请逐项排查：

1. ✅ 字体文件路径是否在 /static/fonts/ 下；
2. ✅ 字体文件名是否为英文；
3. ✅ 引入路径是否为 @/static/fonts/YouYuan.ttf；
4. ✅ 重新 发行/打包项目，而非仅热重载运行；
5. ✅ 确认字体文件无版权限制或未被系统拦截。

---

💡 六、字体效果验证

你可以在页面中添加如下代码测试：

<template>
  <view>
    <text>普通字体</text>
    <text style="font-family:'YouYuan'; font-size: 22px;">这是幼圆字体效果</text>
  </view>
</template>

如果显示文字变圆润柔和，即说明字体生效 🎉

---

✅ 七、最终推荐方案（完整可用）

以下是可直接粘贴到 App.vue 的完整版本：

<style>
@font-face {
  font-family: 'YouYuan';
  src: url('@/static/fonts/YouYuan.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, body, page, view, text {
  font-family: 'YouYuan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
</style>

---

🧾 八、常见问题 Q&A

问题	解决方案
字体不生效	检查路径是否正确、重新打包
字体只在 H5 生效	改为 @/static/fonts/YouYuan.ttf
页面字体被 uView/组件样式覆盖	可在 App.vue 中添加 !important： font-family: 'YouYuan' !important;
想切换其他字体	替换 .ttf 文件即可

---

🧷 九、总结

• 📁 字体文件放在 /static/fonts/
• 🎨 使用 @font-face 注册字体
• 🌍 在全局样式中设置字体家族
• 📦 App 打包需确保路径正确

---

✨ 至此，你的 UniApp 项目已成功全局启用「幼圆字体」！

支持 H5、微信小程序、App（Android/iOS）等多端展示一致的文字风格。