uniapp 字体设置
全局字体设置
在 App.vue 中通过 CSS 定义全局字体样式:
/* App.vue */
page {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
自定义字体引入
下载字体文件(如 .ttf 或 .woff 格式),存放在 static/fonts 目录。通过 CSS 定义字体族:
@font-face {
font-family: 'CustomFont';
src: url('/static/fonts/your-font.ttf') format('truetype');
}
组件级字体应用
在单个组件中通过 style 标签或内联样式指定:
<view style="font-family: 'CustomFont'">自定义字体文本</view>
动态字体切换
通过数据绑定实现动态字体切换:
export default {
data() {
return {
currentFont: 'PingFang SC'
}
}
}
<view :style="{fontFamily: currentFont}">动态字体</view>
平台适配方案
使用条件编译处理平台差异:
/* #ifdef MP-WEIXIN */
page {
font-family: "PingFang SC";
}
/* #endif */
/* #ifdef APP-PLUS */
page {
font-family: "Microsoft YaHei";
}
/* #endif */
注意事项
- iOS 系统推荐使用
PingFang SC - Android 系统推荐使用
Microsoft YaHei - 自定义字体文件需考虑体积,过大会影响加载性能
- 部分平台可能需要 base64 编码字体文件







