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

js 复制代码
<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 预加载字体。

javascript 复制代码
<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' 来应用字体。

js 复制代码
<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>

如果要兼容微信小程序

js 复制代码
<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>

如果使用网络字体

js 复制代码
@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('https://your-domain.com/fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
  font-weight: 400;
}
相关推荐
@泽栖40 分钟前
下载HBuilder X,使用uniapp编写微信小程序
微信小程序·小程序·uni-app
程序员王天4 小时前
Uniapp 自定义TabBar + 动态菜单实现教程(Vuex状态管理详解)
微信小程序·uni-app
卡尔特斯9 小时前
Uniapp 控制台日志工具(DZMUniappConsoleLog)
前端·uni-app
萝卜白菜都是菜9 小时前
uniapp打包app关于获取本机相机、相册、麦克风等权限问题(ios第一次安装权限列表里没有对应权限问题)
uni-app
xixixin_10 小时前
【uniapp】uni.setClipboardData 方法失效 bug 解决方案
java·前端·uni-app
学前端搞口饭吃11 小时前
uniapp打ios包
ios·uni-app
```陪伴11 小时前
uniapp打包IOS私钥证书过期了,如何在非mac系统操作
macos·ios·uni-app
周胡杰12 小时前
鸿蒙-跨设备互通,设备互通提供跨设备的相机、扫描、图库访问能力,平板或2in1设备可以调用手机的相机、扫描、图库等功能。
数码相机·华为·自动化·电脑·harmonyos·鸿蒙·鸿蒙系统
Monly2115 小时前
Uniapp:创建项目
uni-app
清晨細雨15 小时前
uniapp微信小程序:WIFI设备配网之TCP/UDP开发AP配网
前端·物联网·小程序·uni-app