当前位置:首页 > 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>

平台适配方案

使用条件编译处理平台差异:

uniapp 字体设置

/* #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 服务 UniPush 是 D…

uniapp设置title

uniapp设置title

设置页面标题的方法 在UniApp中设置页面标题可以通过以下几种方式实现,适用于不同场景和需求。 通过pages.json配置 在pages.json文件中,可以为每个页面单独配置导航栏标题。找到对…

海康 uniapp

海康 uniapp

海康威视与UniApp集成方案 海康威视的硬件设备(如摄像头、NVR等)与UniApp结合,通常需要通过海康的开放平台API或SDK实现功能调用。以下是具体实现方法: 获取海康威视开放平台权限 注册…

uniapp adb

uniapp adb

在UniApp中使用ADB的方法 ADB(Android Debug Bridge)是Android开发中常用的调试工具,可用于UniApp项目的真机调试、日志查看等操作。以下是具体使用方法: 连接…

eeui uniapp

eeui uniapp

关于 EEUI 和 UniApp 的解析 EEUI 和 UniApp 是两个不同的跨平台开发框架,均用于快速构建多端应用。以下是它们的核心特点和对比分析: EEUI 框架特点 EEUI 是一个基于…

美颜uniapp

美颜uniapp

美颜功能在UniApp中的实现方法 在UniApp中实现美颜功能,可以通过以下几种方式: 使用第三方SDK或插件 腾讯云美颜SDK:提供直播推流场景下的美颜、滤镜、贴纸等功能,支持UniApp集成…