【字体导入】鸿蒙应用开发

【字体导入】鸿蒙应用开发

在鸿蒙应用开发过程中，系统默认提供的字体样式仅限于常规（normal）和斜体（Italic），这往往无法满足开发者对个性化字体的需求。为了解决这一问题，我特别整理了一份指南，详细介绍了如何在鸿蒙应用中导入和使用第三方字体。

一、获取自己需要的字体资源

通过互联网上的免费字体库或付费字体网站来寻找和下载多种风格的字体，如以下阿里字体和鸿蒙字体等。

• 鸿蒙官方字体包：设计资源-HarmonyOS设计-开发者联盟 (huawei.com)

• 阿里字体：iconfont-阿里巴巴矢量图标库

其他字体自行下载……

二、在项目中添加字体

将下载的字体资源包解压后，将所需的字体资源包（.ttf或.otf文件）添加到项目的资源文件目录中，如下图中将字体添加到“entry>src>main>resources>rawfile"为例：

在鸿蒙应用开发中，rawfile 文件目录是一个特殊的目录，用于存放那些不会被编译成二进制文件的资源，也就是说，这些文件会以原始形式直接打包进应用包中。rawfile 目录中的资源文件不会根据设备状态去匹配不同的资源，它们通过指定文件路径和文件名来引用。

rawfile 目录通常位于 resources 目录下，其组织形式支持创建多层子目录，目录名称可以自定义，文件夹内可以自由放置各类资源文件。

三、使用字体

• 字体导入

  font.registerFont({
    familyName: "aliPuHuiTi", //字体名
    familySrc: $rawfile('Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf') //字体资源
  })
  

• 字体调用

  Text('阿里第三方字体使用')
    .fontFamily('aliPuHuiTi') //字体调用
    .fontSize(30)
  

• 完整代码

  import { font } from '@kit.ArkUI';
  
  @Entry
  @Component
  struct LinkPage {
  
    onPageShow(): void {
      font.registerFont({
        familyName: "aliPuHuiTi", //字体名
        familySrc: $rawfile('Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf') //字体资源
      })
  
      font.registerFont({
        familyName: "HarmonyOS_Sans", //字体名
        familySrc: $rawfile('HarmonyOS_Sans_Condensed_Black_Italic.ttf') //字体资源
      })
  
    }
  
    build() {
      Column() {
        Text('阿里第三方字体使用')
          .fontFamily('aliPuHuiTi') //字体调用
          .fontSize(30)
        Text('鸿蒙官方字体使用')
          .fontFamily('HarmonyOS_Sans')
          .fontSize(30)
      }
      .height('100%')
      .width('100%')
    }
  }
  

四、效果图