当前位置:首页 > uni-app

uniapp 字体设置

2026-02-05 21:08:18uni-app

全局字体设置

App.vue 中通过 CSS 定义全局字体样式:

/* App.vue */
page {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

自定义字体引入

下载字体文件(如 .ttf.woff 格式),存放在 static/fonts 目录。通过 CSS 定义字体族:

uniapp 字体设置

@font-face {
  font-family: 'CustomFont';
  src: url('/static/fonts/your-font.ttf') format('truetype');
}

组件级字体应用

在单个组件中通过 style 标签或内联样式指定:

uniapp 字体设置

<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 编码字体文件

标签: 字体uniapp
分享给朋友:

相关文章

uniapp发布到应用商店

uniapp发布到应用商店

发布到苹果App Store 确保开发者账号已注册并加入Apple Developer Program,年费99美元。在Xcode中生成iOS发布证书(.p12)和描述文件(Provisioning…

uniapp旋转横屏

uniapp旋转横屏

实现横屏模式的方法 在UniApp中实现横屏模式,可以通过配置页面方向或使用CSS旋转实现。以下是两种常见方法: 修改manifest.json配置 在项目的manifest.json文件中,找到"…

uniapp中如何引用echarts

uniapp中如何引用echarts

在uniapp中引用echarts uniapp中引用echarts可以通过原生方式或第三方插件实现,以下是具体方法: 使用原生echarts 安装echarts依赖 在项目根目录下执行命令:…

uniapp可以用vant吗

uniapp可以用vant吗

uniapp中使用Vant组件库的可行性 Vant是专为Vue.js设计的移动端组件库,而uniapp是一个跨平台开发框架。两者并非原生兼容,但可通过以下方式实现部分Vant组件的使用。 方法一:使…

uniapp布局规范

uniapp布局规范

uniapp布局规范 uniapp的布局规范基于Flexbox模型,支持跨平台开发,需兼顾不同设备的适配性。以下是核心布局要点: Flex布局基础 使用Flexbox实现弹性布局,默认display…

uniapp显示不全

uniapp显示不全

uniapp显示不全的常见原因及解决方法 页面布局问题 检查页面布局是否超出屏幕范围,确保根元素或外层容器设置正确的宽度和高度。使用flex布局或百分比单位适应不同屏幕尺寸。 滚动区域未设置 在需要…