uniapp 使用 鸿蒙开源字体
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
<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 预加载字体。
<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’ 来应用字体。
<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>
如果要兼容微信小程序
<script>
export default {onLaunch: function () {// 小程序环境动态加载字体// #ifdef MP-WEIXINconst 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>
如果使用网络字体
@font-face {font-family: 'HarmonyOS Sans';src: url('https://your-domain.com/fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');font-weight: 400;
}
相关文章:
uniapp 使用 鸿蒙开源字体
uniapp vue3 使用 鸿蒙开源字体 我的需求是全局使用鸿蒙字体。 所以: 0. 首先下载鸿蒙字体: 鸿蒙资源 下载后解压,发现里面有几个文件夹: 字体名称说明Sans默认的鸿蒙字体,支持基本的多语言字符(包括字…...
LabVIEW多电机CANopen同步
核心问题与解决方案 通信层配置 节点ID与波特率冲突问题:在多电机系统中,节点ID重复或波特率不匹配常导致通信中断或数据丢失。案例:某3轴贴片机因步科驱动器的默认节点ID均为1,触发了总线仲裁错误。解决方案:通过配置…...
每日定投40刀BTC(2)20250209 - 20250212
行路吟 青山叠叠水迢迢, 步履虽艰志未消。 莫问前程几多苦, 长风破浪自逍遥。...
【LeetCode Hot100 子串】和为 k 的子数组、滑动窗口最大值、最小覆盖子串
子串 1. 和为 k 的子数组题目描述解题思路主要思路步骤 时间复杂度与空间复杂度代码实现 2. 滑动窗口最大值题目描述解题思路双端队列的原理:优化步骤: Java实现 3. 最小覆盖子串题目描述解题思路滑动窗口的基本思路:具体步骤:算法…...
某虚拟页式存储管理系统中有一个程序占8个页面,运行时访问页面的顺序是1,2,3,4,5,3,4,1,6,7,8,7,8,5。假设刚开始内存没有预装入任何页面。
某虚拟页式存储管理系统中有一个程序占8个页面,运行时访问页面的顺序是1,2,3,4,5,3,4,1,6,7,8,7,8,5。假设刚开始内存没有预装入任何页面。 (1) 如果采用LRU调度算法,该程序在得到4块内存空间时,会产生多少次缺页中断?请给出详细…...
傅里叶公式推导(三)
文章目录 周期 2L周期T 周期 2L 周期 T 2 L T2L T2L 的傅里叶变换 即 f ( t ) f ( t 2 L ) f(t) f(t2L) f(t)f(t2L) xt2 π \pi π 2 L 2L 2L 原公式 f ( x ) a 0 2 ∑ n 1 ∞ [ a n cos n x b n sin n x ] a 0 1 π ∫ − π π f ( x ) d x a n 1 π ∫…...
Ubuntu 下 nginx-1.24.0 源码分析 - ngx_time_update函数
定义在 src\core\ngx_times.c 中 ngx_time_init 函数后面 void ngx_time_update(void) {u_char *p0, *p1, *p2, *p3, *p4;ngx_tm_t tm, gmt;time_t sec;ngx_uint_t msec;ngx_time_t *tp;struct timeval tv;if (!ngx_trylock(&ngx…...
老牌系统工具箱,现在还能打!
今天给大家分享一款超实用的电脑软硬件检测工具,虽然它是一款比较“资深”的软件,但依然非常好用,完全能满足我们的日常需求。 电脑软硬件维护检测工具 功能强大易用 这款软件非常贴心,完全不需要安装,直接打开就能用…...
mysql error1449解决方法
MySQL Error 1449 错误信息为 “The user specified as a definer (userhost) does not exist”,意思是定义者(创建存储过程、函数、触发器等数据库对象时指定的用户)在当前系统中不存在,从而导致无法正常使用这些对象。以下是针对…...
Notepad++ 中删除所有以 “pdf“ 结尾的行
Notepad 中删除所有以 “pdf” 结尾的行 操作步骤 1.打开文件: 在 Notepad 中打开你需要处理的文本文件。 2.打开查找和替换对话框: 按快捷键 Ctrl F,打开“查找和替换”对话框。 3.启用正则表达式模式: 在对话框的底部…...
归并排序 和 七大算法的总结图
目录 什么是递归排序: 图解: 递归方法: 代码实现: 思路分析: 非递归方法: 思路: 代码实现: 思路分析: 什么是递归排序: 先将数据分解成诺干个序列࿰…...
嵌入式硬件篇---原码、补码、反码
文章目录 前言简介八进制原码、反码、补码1. 原码规则示例问题 2. 反码规则示例问题 3. 补码规则示例优点 4. 补码的运算5. 总结 十六进制原码、反码、补码1. 十六进制的基本概念2. 十六进制的原码规则示例 3. 十六进制的反码规则示例 4. 十六进制的补码规则示例 5. 十六进制补…...
评估多智能体协作网络(MACNET)的性能:COT和AUTOGPT基线方法
评估多智能体协作网络(MACNET)的性能 方法选择:选择COT(思维链,Chain of Thought)、AUTOGPT等作为基线方法。 COT是一种通过在推理过程中生成中间推理步骤,来增强语言模型推理能力的方法,能让模型更好地处理复杂问题,比如在数学问题求解中,展示解题步骤。 AUTOGPT则是…...
洛谷题目: P2398 GCD SUM 题解 (本题较难,省选-难度)
题目传送门: P2398 GCD SUM - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 前言: 本题涉及到 欧拉函数,素数判断,质数,筛法 ,三大知识点,相对来说还是比较难的。 本题要求我们计算 …...
kubernetes-cni 框架源码分析
深入探索 Kubernetes 网络模型和网络通信 Kubernetes 定义了一种简单、一致的网络模型,基于扁平网络结构的设计,无需将主机端口与网络端口进行映射便可以进行高效地通讯,也无需其他组件进行转发。该模型也使应用程序很容易从虚拟机或者主机物…...
AI Agent有哪些痛点问题
AI Agent有哪些痛点问题 目录 AI Agent有哪些痛点问题AI Agent领域有哪些知名的论文缺乏一个将智能多智能体技术和在真实环境中学习的两个适用流程结合起来的统一框架LLM的代理在量化和客观评估方面存在挑战自主代理在动态环境中学习、推理和驾驭不确定性存在挑战AI Agent领域有…...
使用Java爬虫获取京东JD.item_sku API接口数据
在电商领域,商品的SKU(Stock Keeping Unit)信息是运营和管理的关键数据。SKU信息包括商品的规格、价格、库存等,对于商家的库存管理、定价策略和市场分析至关重要。京东作为国内领先的电商平台,提供了丰富的API接口&am…...
华为云+硅基流动使用Chatbox接入DeepSeek-R1满血版671B
华为云硅基流动使用Chatbox接入DeepSeek-R1满血版671B 硅基流动 1.1 注册登录 1.2 实名认证 1.3 创建API密钥 1.4 客户端工具 OllamaChatboxCherry StudioAnythingLLM 资源包下载: AI聊天本地客户端 接入Chatbox客户端 点击设置 选择SiliconFloW API 粘贴1.3创…...
平方数列与立方数列求和的数学推导
先上结论: 平方数列求和公式为: S 2 ( n ) n ( n 1 ) ( 2 n 1 ) 6 S_2(n) \frac{n(n1)(2n1)}{6} S2(n)6n(n1)(2n1) 立方数列求和公式为: S 3 ( n ) ( n ( n 1 ) 2 ) 2 S_3(n) \left( \frac{n(n1)}{2} \right)^2 S3(n)(2n(n1)…...
Java中的synchronized关键字与锁升级机制
在多线程编程中,线程同步是确保程序正确执行的关键。当多个线程同时访问共享资源时,如果不进行同步管理,可能会导致数据不一致的问题。为了避免这些问题,Java 提供了多种同步机制,其中最常见的就是 synchronized 关键字…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验,我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育,这并非炒作,而是已经发生的巨大变革。教育机构和教育者不能忽视它,试图简单地禁止学生使…...
论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving
地址:LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂,正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...
