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

如果使用网络字体

@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('https://your-domain.com/fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
  font-weight: 400;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/968789.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【ESP32指向鼠标】——icm20948与esp32通信

【ESP32指向鼠标】——icm20948与esp32通信

【ESP32指向鼠标】——icm20948与esp32通信 ICM-20948介绍 ICM-20948 是一款由 InvenSense&#xff08;现为 TDK 的一部分&#xff09;生产的 9 轴传感器集成电路。它结合了 陀螺仪、加速度计和磁力计。 内置了 DMP&#xff08;Digital Motion Processor&#xff09;即负责执…
阅读更多...
机器学习（李宏毅）——BERT

机器学习（李宏毅）——BERT

一、前言 本文章作为学习2023年《李宏毅机器学习课程》的笔记&#xff0c;感谢台湾大学李宏毅教授的课程&#xff0c;respect&#xff01;&#xff01;&#xff01; 读这篇文章必须先了解self-attention、Transformer&#xff0c;可参阅我其他文章。 二、大纲 BERT简介self-…
阅读更多...
NO.12十六届蓝桥杯备战|关系操作符|操作符连用|浮点数比较|练习2道(C++)

NO.12十六届蓝桥杯备战|关系操作符|操作符连用|浮点数比较|练习2道(C++)

关系操作符 关系操作符介绍 ⽤于⽐较的表达式&#xff0c;称为“关系表达式”&#xff08;relational expression&#xff09;&#xff0c;⾥⾯使⽤的运算符就称为“关 系运算符”&#xff08;relational operator&#xff09;&#xff0c;主要有下⾯6个。 运算符描述>⼤…
阅读更多...
JVM组成

JVM组成

JVM是什么&#xff1f; JVM&#xff08;Java Virtual Machine&#xff09;&#xff1a;Java程序的运行环境(java二进制字节码的运行环境) 好处&#xff1a; 1.一次编写&#xff0c;到处运行 Java代码是如何做到一次编写&#xff0c;到处运行&#xff1f; 计算机的最底层是计…
阅读更多...
不小心删除服务[null]后，git bash出现错误

不小心删除服务[null]后，git bash出现错误

不小心删除服务[null]后&#xff0c;git bash出现错误&#xff0c;如何解决&#xff1f; 错误描述&#xff1a;打开 git bash、msys2都会出现错误「bash: /dev/null: No such device or address」 问题定位&#xff1a; 1.使用搜索引擎搜索「bash: /dev/null: No such device o…
阅读更多...
130,[1] 攻防世界 very_easy_sql

130,[1] 攻防世界 very_easy_sql

进入靶场 典型SQL注入页面 先查看源码 访问 试试http://127.0.0.1/ 还尝试了其他都是nonono 回归第一个登录页面 提交的内容不在url处显示&#xff0c;反而第二个url页面会在url处显示 明白第一个页面是通过post方式提交&#xff0c;反正没得到什么信息&#xff0c;去抓…
阅读更多...
Android10 音频参数导出合并

Android10 音频参数导出合并

A10 设备录音时底噪过大&#xff0c;让音频同事校准了下&#xff0c;然后把校准好的参数需要导出来&#xff0c;集成到项目中&#xff0c;然后出包&#xff0c;导出方式在此记录 设备安装debug系统版本调试好后&#xff0c; adb root adb remount adb shell 进入设备目录 导…
阅读更多...
django中间件，中间件给下面传值

django中间件，中间件给下面传值

1、新建middleware.py文件 # myapp/middleware.py import time from django.http import HttpRequest import json from django.http import JsonResponse import urllib.parse from django.core.cache import cache from comm.Db import Db class RequestTimeMiddleware:def …
阅读更多...
24电子信息类研究生复试面试问题汇总 电子信息类专业知识问题最全！电子信息复试全流程攻略 电子信息考研复试真题汇总

24电子信息类研究生复试面试问题汇总 电子信息类专业知识问题最全！电子信息复试全流程攻略 电子信息考研复试真题汇总

你是不是在为电子信息考研复试焦虑&#xff1f;害怕被老师问到刁钻问题、担心专业面答不上来&#xff1f;别慌&#xff01;作为复试面试92分逆袭上岸的学姐&#xff0c;今天手把手教你拆解电子信息类复试通关密码&#xff01;看完这篇&#xff0c;让你面试现场直接开大&#xf…
阅读更多...
LVDS接口总结--(1)LVDS硬件电路接口

LVDS接口总结--(1)LVDS硬件电路接口

1.LVDS差分信号电路原理 LVDS指的是低压差分信号&#xff0c;是一种电平标准。 差分信号在串行通信中有着非常广泛的应用&#xff0c;典型应用有PCIE中的gen1&#xff0c;gen2&#xff0c;gen3&#xff0c;gen4&#xff0c;gen5&#xff0c;SATA接口&#xff0c;USB接口等。 …
阅读更多...
【STM32】HAL库Host MSC读写外部U盘及FatFS文件系统的USB Disk模式

【STM32】HAL库Host MSC读写外部U盘及FatFS文件系统的USB Disk模式

【STM32】HAL库Host MSC读写外部U盘及FatFS文件系统的USB Disk模式 在先前 分别介绍了FatFS文件系统和USB虚拟U盘MSC配置 前者通过MCU读写Flash建立文件系统 后者通过MSC连接电脑使其能够被操作 这两者可以合起来 就能够实现同时在MCU、USB中操作Flash的文件系统 【STM32】通过…
阅读更多...
第四期书生大模型实战营-第5关-L2G5000

第四期书生大模型实战营-第5关-L2G5000

1 Web 版茴香豆 助教说这趴先跳过&#xff0c;那我就跳过 2 茴香豆本地标准版搭建 2.1 环境搭建 2.2 安装茴香豆 2.3 知识库创建 2.4 测试知识助手 2.4.1 命令行运行 2.4.2 Gradio UI 界面测试 确认一下是否正常 完美。 至于选做&#xff0c;我这么懒&#xff0c;怎么可能…
阅读更多...
Elastic Cloud Serverless 现已在 Microsoft Azure 上提供技术预览版

Elastic Cloud Serverless 现已在 Microsoft Azure 上提供技术预览版

作者&#xff1a;来自 Elastic Yuvi Gupta Elastic Cloud Serverless 提供了启动和扩展安全性、可观察性和搜索解决方案的最快方法 — 无需管理基础设施。 今天&#xff0c;我们很高兴地宣布 Microsoft Azure 上的 Elastic Cloud Serverless 技术预览版现已在美国东部地区推出。…
阅读更多...
go语言简单快速的按顺序遍历kv结构(map)

go语言简单快速的按顺序遍历kv结构(map)

文章目录 需求描述用map实现按照map的key排序用二维切片实现用结构体实现 需求描述 在go语言中&#xff0c;如果需要对map遍历&#xff0c;每次输出的顺序是不固定的&#xff0c;可以考虑存储为二维切片或结构体。 假设现在需要在页面的下拉菜单中展示一些基础的选项&#xff…
阅读更多...
TDengine 产品由哪些组件构成

TDengine 产品由哪些组件构成

目 录 背景产品生态taosdtaosctaosAdaptertaosKeepertaosExplorertaosXtaosX Agent应用程序或第三方工具 背景 了解一个产品&#xff0c;最好从了解产品包括哪些内容开始&#xff0c;我这里整理了一份儿 TDegnine 产品包括有哪些组件&#xff0c;每个组件作用是什么的说明&a…
阅读更多...
2.buuctf [NPUCTF2020]ReadlezPHP（类与对象、类的属性、序列化、代码复用与封装）

2.buuctf [NPUCTF2020]ReadlezPHP（类与对象、类的属性、序列化、代码复用与封装）

进入题目页面如下 哎呦&#xff0c;有趣哈 ctrlu查看源码&#xff0c;下拉看到 点进去看看 看到源码 开始审代码 <?php // #error_reporting(0); 这行代码被注释掉了&#xff0c;原本的作用是关闭所有PHP错误报告 // 定义一个名为 HelloPhp 的类 class HelloPhp {// 声明…
阅读更多...
Spring MVC 拦截器（Interceptor）与过滤器（Filter）的区别？

Spring MVC 拦截器（Interceptor）与过滤器（Filter）的区别？

1、两者概述 拦截器&#xff08;Interceptor&#xff09;&#xff1a; 只会拦截那些被 Controller 或 RestController 标注的类中的方法处理的请求&#xff0c;也就是那些由 Spring MVC 调度的请求。过滤器&#xff08;Filter&#xff09;&#xff1a; 会拦截所有类型的 HTTP …
阅读更多...
多机器人系统的大语言模型：综述

多机器人系统的大语言模型：综述

25年2月来自 Drexel 大学的论文“Large Language Models for Multi-Robot Systems: A Survey”。 大语言模型 (LLM) 的快速发展为多机器人系统 (MRS) 开辟新的可能性&#xff0c;从而增强通信、任务规划和人机交互。与传统的单机器人和多智体系统不同&#xff0c;MRS 带来独特…
阅读更多...
搭建Spark集群（CentOS Stream 9）

搭建Spark集群（CentOS Stream 9）

零、资源准备 虚拟机相关： VMware workstation 16：虚拟机/vmware_16.zip（建议选择vmware_17版本）CentOS Stream 9：虚拟机/CentOS-Stream-9-latest-x86_64-boot.iso（安装包小，安装时需要联网下载）/ 虚拟机/CentOS-Stream-9-latest-x86_64-dvd1.iso(安装包大)JDK jdk1.8：…
阅读更多...
FAST_LIVO2初次安装编译

FAST_LIVO2初次安装编译

1、安装依赖库 &#xff08;1&#xff09;Sophus git clone https://github.com/strasdat/Sophus.git cd Sophus git checkout a621ff mkdir build && cd build && cmake .. make sudo make install 命令行运行&#xff1a;make时&#xff0c;出现以下错误&…
阅读更多...
最新文章

Copyright @ 2022~2023