当前位置：首页 > news >正文

UniApp 全局使用字体教程

news 2025/11/9 9:23:05

🌈 UniApp 全局使用字体教程

本文档将指导你如何在 UniApp 项目中引入自定义字体文件（如 幼圆.ttf），并实现全局页面统一使用该字体。
适用于 H5、App、微信小程序 等多端。

📁 一、准备字体文件

将你的字体文件（例如 YouYuan.ttf）放入项目的静态目录：
```
/static/fonts/YouYuan.ttf
```
⚠️ 注意事项
- 字体文件名不要使用中文或空格（推荐命名：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 端字体未生效，请逐项排查：

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

💡 六、字体效果验证

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

<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` 文件即可