uniapp 使用 鸿蒙开源字体

1710orange2025-02-14 13:50

uniapp vue3 使用 鸿蒙开源字体

我的需求是全局使用鸿蒙字体。

所以：

0. 首先下载鸿蒙字体：

鸿蒙资源

下载后解压，发现里面有几个文件夹：

字体名称 说明
Sans 默认的鸿蒙字体，支持基本的多语言字符（包括字母、数字和部分中文）。
Sans_SC 鸿蒙字体的简体中文版本，专门优化了简体中文字形。
Sans_TC 鸿蒙字体的繁体中文版本，专门优化了繁体中文字形。
Sans_Italic 鸿蒙字体的斜体版本，适用于字母和数字的斜体显示。
Sans_Condensed 鸿蒙字体的压缩版本，适用于需要紧凑排版的场景。
Sans_Condensed_Italic 鸿蒙字体的压缩斜体版本，适用于需要紧凑排版且斜体显示的场景。
Sans_Naskh_Arabic 鸿蒙字体的阿拉伯语版本，专门优化了阿拉伯语字形。
Sans_Naskh_Arabic_UI 鸿蒙字体的阿拉伯语 UI 版本，适用于用户界面的阿拉伯语显示。

如果你需要支持 简体中文 和 字母数字，应该使用以下字体：

HarmonyOS_Sans_SC.ttf：这是鸿蒙字体的简体中文版本，专门优化了简体中文字形，同时支持字母和数字。

1. 把字体文件放入目录

2. 写入App.vue

js 复制代码 
<script>
export default {
  onLaunch: function () {
    // console.log('App Launch')
    const fonts = [
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Thin.ttf', weight: 100 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Light.ttf', weight: 300 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Regular.ttf', weight: 400 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Medium.ttf', weight: 500 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Bold.ttf', weight: 700 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Black.ttf', weight: 900 },
    ]

    fonts.forEach(font => {
      uni.loadFontFace({
        family: font.name,
        source: `url("${font.path}")`,
        weight: font.weight.toString(),
        success: () => {
          console.log(`字体 ${font.name} (${font.weight}) 加载成功`)
        },
        fail: (err) => {
          console.error(`字体 ${font.name} (${font.weight}) 加载失败`, err)
        }
      })
    })
  },
  onShow: function () {
    // console.log('App Show')
  },
  onHide: function () {
    // console.log('App Hide')
  }
}
</script>

<style lang="scss">
/* 引入 uview-plus 和 uni-scss */
@import "uview-plus/index.scss";
@import "uni_modules/uni-scss/index.scss";

/* 引入鸿蒙字体的多字重 */
@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('/static/fonts/HarmonyOS_Sans_SC_Thin.ttf') format('truetype');
  font-weight: 100; /* Thin */
}

@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('/static/fonts/HarmonyOS_Sans_SC_Light.ttf') format('truetype');
  font-weight: 300; /* Light */
}

@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('/static/fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
  font-weight: 400; /* Regular */
}

@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('/static/fonts/HarmonyOS_Sans_SC_Medium.ttf') format('truetype');
  font-weight: 500; /* Medium */
}

@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('/static/fonts/HarmonyOS_Sans_SC_Bold.ttf') format('truetype');
  font-weight: 700; /* Bold */
}

@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('/static/fonts/HarmonyOS_Sans_SC_Black.ttf') format('truetype');
  font-weight: 900; /* Black */
}

/* 设置全局字体 */
page {
  font-family: 'HarmonyOS Sans', sans-serif;
  font-weight: 500; /* 默认使用 Medium字重 */
  background-color: #edf0f4; /* 页面背景色 */
}

/* 设置 uview-plus 组件的默认字体 */
.u-page {
  font-family: 'HarmonyOS Sans', sans-serif;
}
</style>

预加载字体（可选）

为了确保字体加载成功，可以在 onLaunch 生命周期中使用 uni.loadFontFace 预加载字体。

javascript 复制代码 
<script>
export default {
  onLaunch: function () {
    // console.log('App Launch')
    const fonts = [
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Thin.ttf', weight: 100 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Light.ttf', weight: 300 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Regular.ttf', weight: 400 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Medium.ttf', weight: 500 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Bold.ttf', weight: 700 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Black.ttf', weight: 900 },
    ]

    fonts.forEach(font => {
      uni.loadFontFace({
        family: font.name,
        source: `url("${font.path}")`,
        weight: font.weight.toString(),
        success: () => {
          console.log(`字体 ${font.name} (${font.weight}) 加载成功`)
        },
        fail: (err) => {
          console.error(`字体 ${font.name} (${font.weight}) 加载失败`, err)
        }
      })
    })
  },
  onShow: function () {
    // console.log('App Show')
  },
  onHide: function () {
    // console.log('App Hide')
  }
}
</script>

也可以在页面中使用字体

在具体的页面中，你可以直接使用 font-family: 'HarmonyOS Sans SC' 来应用字体。

js 复制代码 
<template>
  <view class="container">
    <text class="text">这是一段测试文本（简体中文）</text>
    <text class="text">Hello, 123456</text>
  </view>
</template>

<script setup>
// 页面逻辑
</script>

<style scoped>
.container {
  padding: 20px;
}

.text {
  font-family: 'HarmonyOS Sans SC', sans-serif;
  font-size: 16px;
  color: #333;
}
</style>

如果要兼容微信小程序

js 复制代码 
<script>
export default {
  onLaunch: function () {
    // 小程序环境动态加载字体
    // #ifdef MP-WEIXIN
    const fonts = [
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Thin.ttf', weight: 100 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Light.ttf', weight: 300 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Regular.ttf', weight: 400 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Medium.ttf', weight: 500 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Bold.ttf', weight: 700 },
      { name: 'HarmonyOS Sans', path: '/static/fonts/HarmonyOS_Sans_SC_Black.ttf', weight: 900 },
    ];

    fonts.forEach(font => {
      uni.loadFontFace({
        family: font.name,
        source: `url("${font.path}")`,
        weight: font.weight.toString(),
        success: () => {
          console.log(`字体 ${font.name} (${font.weight}) 加载成功`);
        },
        fail: (err) => {
          console.error(`字体 ${font.name} (${font.weight}) 加载失败`, err);
        }
      });
    });
    // #endif
  },
  onShow: function () {
    // console.log('App Show')
  },
  onHide: function () {
    // console.log('App Hide')
  }
}
</script>

<style lang="scss">
/* 引入 uview-plus 和 uni-scss */
@import "uview-plus/index.scss";
@import "uni_modules/uni-scss/index.scss";

/* 引入鸿蒙字体的多字重 */
/* H5 环境直接使用 @font-face */
/* #ifdef H5 */
@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('/static/fonts/HarmonyOS_Sans_SC_Thin.ttf') format('truetype');
  font-weight: 100; /* Thin */
}

@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('/static/fonts/HarmonyOS_Sans_SC_Light.ttf') format('truetype');
  font-weight: 300; /* Light */
}

@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('/static/fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
  font-weight: 400; /* Regular */
}

@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('/static/fonts/HarmonyOS_Sans_SC_Medium.ttf') format('truetype');
  font-weight: 500; /* Medium */
}

@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('/static/fonts/HarmonyOS_Sans_SC_Bold.ttf') format('truetype');
  font-weight: 700; /* Bold */
}

@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('/static/fonts/HarmonyOS_Sans_SC_Black.ttf') format('truetype');
  font-weight: 900; /* Black */
}
/* #endif */

/* 设置全局字体 */
page {
  font-family: 'HarmonyOS Sans', sans-serif;
  font-weight: 500; /* 默认使用 Medium 字重 */
  background-color: #edf0f4; /* 页面背景色 */
}

/* 设置 uview-plus 组件的默认字体 */
.u-page {
  font-family: 'HarmonyOS Sans', sans-serif;
}
</style>

如果使用网络字体

js 复制代码 
@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('https://your-domain.com/fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
  font-weight: 400;
}
相关推荐
游戏开发爱好者827 分钟前
Fiddler中文版使用指南 提升开发流程的一站式抓包与调试体验
android·ios·小程序·https·uni-app·iphone·webview
顽疲1 小时前
从零用java实现小红书springboot_vue_uniapp（15）评论和im添加图片
java·vue.js·spring boot·uni-app
2501_9159214311 小时前
移动端 WebView 视频无法播放怎么办 媒体控件错误排查与修复指南
android·ios·小程序·https·uni-app·iphone·webview
雪芽蓝域zzs11 小时前
uniapp 富文本rich-text 文本首行缩进和图片居中
uni-app
cc蒲公英16 小时前
uniapp x swiper/image组件mode=“aspectFit“ 图片有的闪现后黑屏
java·前端·uni-app
Mr_汪1 天前
uniapp使用har包
uni-app
Nan_Shu_6142 天前
学习：入门uniapp Vue3组合式API版本（17）
前端·vue.js·学习·uni-app
2501_915909062 天前
Charles中文版使用教程 高效抓包与API调试常见问题处理
android·ios·小程序·https·uni-app·iphone·webview
jingling5552 天前
UniApp 实现顶部固定导航栏 Tab 及滚动变色效果
前端·javascript·前端框架·uni-app
The_era_achievs_hero2 天前
UniappDay06
开发语言·javascript·uni-app
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03UV安装并设置国内源04腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）05KGG转MP3工具|非KGM文件|解密音频06VMware Workstation Pro虚拟机的下载和安装图文保姆级教程(附下载链接)07如何在 Cursor 中继续使用 Claude08Claude Code+智谱GLM-4.5接入指南（附实测体验）09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10Coze 开源了，送上保姆级私有化部署方案【建议收藏】