当前位置:首页 > 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 定义字体族:

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

uniapp 字体设置

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

相关文章

uniapp 消息推送

uniapp 消息推送

uniapp 消息推送实现方法 使用uniPush服务 uniapp官方提供了uniPush服务,支持iOS、Android及小程序平台的消息推送。需要在manifest.json中配置推送模块,并按…

uniapp使用npm

uniapp使用npm

uniapp中使用npm的方法 uniapp支持通过npm安装和管理第三方依赖包,以下是具体操作步骤: 安装Node.js环境 确保本地已安装Node.js(建议使用LTS版本),安装后会自动包含…

uniapp怎么启动

uniapp怎么启动

启动UniApp项目的步骤 确保已安装Node.js(建议版本12+)和HBuilderX(官方IDE)。若未安装,需先下载并配置环境。 安装开发工具 从HBuilderX官网下载对应操作系统的版…

uniapp实名认证

uniapp实名认证

uniapp实名认证实现方法 使用uniCloud实名认证插件 uniapp官方提供了uniCloud的实名认证插件,可快速集成到项目中。插件支持身份证识别、活体检测等功能,需在uniCloud控制台…

uniapp旋转横屏

uniapp旋转横屏

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

uniapp视频

uniapp视频

uniapp视频开发基础 uniapp支持通过video组件实现视频播放功能,该组件兼容多端(H5、小程序、App等),基本用法如下: <template> <video…