uniapp 使用 鸿蒙开源字体

embedded/2025/2/18 17:11:35/

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;
}

http://www.ppmy.cn/embedded/162343.html

相关文章

Nginx之rewrite重写功能

Nginx之rewrite重写功能

目录 一、rewrite概述 1、rewrite功能 2、跳转场景 二、标准配置指令 1、rewrite日志记录指令 2、未初始化变量告警日志记录指令 3、rewrite 指令 3.1 正则表达式 三、rewrite模块使用实例 1.基于域名的跳转 2.基于客户端 IP 访问跳转 3.?基于旧域名跳转到新域名后…
阅读更多...
Toast 弹窗的排查历程

Toast 弹窗的排查历程

1. 背景 有一个游戏包被商店拘审了 拘审理由是&#xff1a;游戏启动后&#xff0c;toast 弹出显示 i m holmes~ 字样&#xff0c;并跳转到快应用 很明显的是 toast 提示&#xff1a;i m holmes&#xff08;有意思&#xff0c;我是福尔摩斯&#x1f436;&#xff09; 测试&…
阅读更多...
笔试题笔记#4、5 记录划水过程

笔试题笔记#4、5 记录划水过程

1 一道必须手模双向链表才能过的题&#xff0c;还必须是C #include <iostream>using namespace std;const int N 100010; int l, r; int n;// 每个节点的左节点和右节点 int L[N], R[N]; // 节点是否已经被使用 int ud[N]; // 剩余节点数量&#xff0c;当前起始节点&a…
阅读更多...
【删除tomcat默认管理控制台】

【删除tomcat默认管理控制台】

停止Tomcat&#xff1a; ./catalina.sh stop 删除管理控制台应用&#xff1a; 进入Tomcat的webapps目录&#xff1a; cd /path/to/tomcat/webapps List item 删除manager和host-manager文件夹&#xff1a; rm -rf manager host-manager 启动Tomcat&#xff1a; ./catali…
阅读更多...
Docker 存储管理：卷、绑定挂载、临时存储

Docker 存储管理：卷、绑定挂载、临时存储

Docker 提供了多种存储方式&#xff0c;用于容器中的数据存储。根据不同的使用场景&#xff0c;Docker 提供了 卷&#xff08;Volumes&#xff09;、绑定挂载&#xff08;Bind Mounts&#xff09; 和 临时存储&#xff08;Tmpfs&#xff09; 等存储方式。每种存储方式有不同的特…
阅读更多...
ChatGPT macOS 桌面应用让你的编程体验更上一层楼

ChatGPT macOS 桌面应用让你的编程体验更上一层楼

高效开发必备&#xff1a;ChatGPT macOS 桌面应用亮点盘点 ©作者|Ninja Geek 来源|神州问学 通过 macOS 版 ChatGPT 应用&#xff0c;已经能够更好的和你的生产力工具无缝配合工作。 大概在三四周之前&#xff0c;Anthropic 在 Claude 上推出了一项名为 Computer Use 的功…
阅读更多...
Baklib知识中台构建企业智能运营核心架构

Baklib知识中台构建企业智能运营核心架构

内容概要 在数字化转型的浪潮中&#xff0c;企业对于知识的系统化管理需求日益迫切。Baklib作为新一代的知识中台&#xff0c;通过构建智能运营核心架构&#xff0c;为企业提供了一套从知识汇聚到场景化落地的完整解决方案。其核心价值在于将分散的知识资源整合为统一的资产池…
阅读更多...
App UI自动化--Appium学习--第二篇

App UI自动化--Appium学习--第二篇

如果第一篇在运行代码的时候出现问题&#xff0c;建议参考我的上一篇文章解决。 1、APP界面信息获取 adb logcat|grep -i displayed代码含义是获取当前应用的包名和界面名。 根据日志信息修改代码当中的包名和界面名&#xff0c;就可以跳转对应的界面。 2、界面元素获取 所…
阅读更多...
最新文章

Copyright @ 2022~2023