uniapp 使用鸿蒙开源字体-CSDN博客

本文链接：https://blog.csdn.net/orange1710/article/details/145589144

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