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 关键字…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
