当前位置： 首页 > article >正文

uniapp 使用 鸿蒙开源字体

article 2025/2/13 8:59:06

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

http://www.kler.cn/a/543253.html

相关文章：

  • 如何保证缓存和数据库一致性
  • Django REST Framework：如何获取序列化后的ID
  • Vue3（2）
  • 自己动手实现一个简单的Linux AI Agent
  • 第5章 数据库系统（选择｜案例｜论文）（重点★★★★★）
  • 目标检测数据集合集（持续更新中）
  • IntelliJ IDEA 2024.1.4版无Tomcat配置
  • 在nodejs中使用RabbitMQ（一）安装，使用
  • SPI为什么不需要加上拉电阻
  • DeepSeek-V3网络模型架构图解
  • kafka介绍，kafka集群环境搭建，kafka命令测试，C++实现kafka客户端
  • 如何选择合适的搜索关键词优化工具？
  • 按键可视化工具——Keyviz
  • 开源堡垒机 JumpServer 社区版实战教程：一步步构建企业安全运维环境
  • SQL Server：查看当前连接数和最大连接数
  • 【Vue3 入门到实战】13. 常用 API
  • 探索技术新边界：让 HTML 电子凭证与二维码、PDF 完美融合
  • 网络安全 理清 安全 边界
  • 计算机毕业设计制造业MES生产管理平台 MES 生产制造源码+文档+运行视频+讲解视频）
  • 【前端】ES6新特性汇总
  • AI直播的未来：智能化、自动化与个性化并存
  • AI时代的前端开发：效率、协作与ScriptEcho
  • C++设计模式 —— 单例模式
  • TiDB Vector 本地部署的亲身体验与心得
  • Druid GetConnectionTimeoutException解决方案之一
  • 基础连接已经关闭: 服务器关闭了本应保持活动状态的连接