HarmonyOS鸿蒙实战（ Beta6.0）基于Text的自定义字体

场景一：应用设置三方字体。

方案：

⦁    在pages的同级目录下创建font目录。

⦁    将已有的ttf文件放入font目录中（或者直接放置在rewfile目录下）。

⦁    在EntryAbility.ets文件的windowStage.loadContent函数中，通过调用font.registerFont方法注册全局的自定义字体。

⦁    注册完成后在所需页面的Text组件上使用fontFamily属性即可。

核心代码

在windowStage.loadContent中进行字体的注册(可通过font.registerFont进行注册)，这样注册完成后，整个应用内都可以使用。

onWindowStageCreate(windowStage: window.WindowStage): void { 
  // Main window is created, set main page for this ability 
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 
  windowStage.loadContent('pages/Index', (err) => { 
  font.registerFont({ 
    familyName:'roundFont', 
    familySrc:'/font/AlimamaFangYuanTiVF-Thin.ttf' 
  }) 
  if (err.code) { 
  hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 
  return; 
} 
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); 
}); 
}

在需要的页面进行使用即可。

@Entry 
@Component 
struct GlobalFont { 
  @State imageUrl: string = 'xxxxx' 
  @State bgColor: string = "#ffffff" 
  @State topSafeHeight: number = 0 
  @State checkedIndex: number = 0 
  private swiperController: SwiperController = new SwiperController() 
  build() { 
    Column() { 
      Stack() { 
        Image(this.imageUrl) 
          .draggable(false) 
          .width("100%") 
          .height('100%') 
        // 使用注册自定义字体 
        Text('氛围感') 
          .fontFamily('roundFont') 
          .fontColor('#ffffff') 
          .fontSize(30) 
          .fontWeight(FontWeight.Bold) 
          .margin({ top: -500 }) 
        // 原生字体，没有使用自定义字体 
        Text('听听海风的声音~') 
          .fontColor('#ffffff') 
          .fontSize(30) 
          .margin({ top: -400 }) 
      } 
      .width('100%') 
      .height('100%') 
    } 
    .height('100%') 
    .width('100%') 
  } 
}

场景二：使用emoji表情。

方案：

emoji表情的使用可分为两种：

⦁    使用自定义的emoji时：下载需要的的ttf文件，在aboutToAppear的生命周期中进行注册，在当前页面的Text组件上设置fontFamily属性去使用。

⦁    使用系统内置的emoji时：直接在Text组件中通过unicode码加载，文字偏少时，建议这么使用。

核心代码

1.使用自定义的emoji时：在生命周期中进行注册。

aboutToAppear(): void { 
  font.registerFont({ 
    // 设置的字体名 
    familyName:'emoji', 
    // 通过resouce的方式加载ttf文件 
    familySrc:$rawfile('NotoColorEmoji-Regular.ttf') 
  }) 
}

给Text组件设置fontFamily属性，fontFamily中的名字就是上面注册时设置的字体名，最后使用的emoji表情，就是从下载的三方emoji字体文件钟直接粘贴得到的。

Flex({direction : FlexDirection.RowReverse,alignItems : ItemAlign.Center}){ 
  Image('https://xxxxx') 
    .width(50) 
    .height(50) 
    .borderRadius(15) 
    .margin({left:10,right : 10}) 
  Text('通过注册自定义字体得到的emoji') 
    .fontFamily('emoji') 
    .fontSize(20) 
    .backgroundColor('#ffc6ecf3') 
    .padding(10) 
    .borderRadius(20) 
} 
.width('90%') 
.margin(20)

2.使用系统内置的emoji时：直接通过Text去加载相关的unicode码，可通过String.fromCodePoint方法对相关unicode进行解析，再通过Text展示出来。

Flex({direction : FlexDirection.Row,alignItems : ItemAlign.Center}){ 
  Image('https://xxxx') 
    .width(50) 
    .height(50) 
    .borderRadius(15) 
    .margin({left:10,right : 10}) 
  Text('系统内置的'+String.fromCodePoint(0x1F97A)) 
    .fontSize(20) 
    .backgroundColor('#fff') 
    .padding(10) 
    .borderRadius(20) 
} 
.width('90%')

场景三：Text&TextArea支持icon。

方案：

Text&TextArea支持icon，从iconfont的官网上下载对应的字体文件，下载完成后进行注册和使用说明。

核心代码

与场景二相同。

场景四：Text生僻字的显示。

方案：

系统自带的字体不一定能展示所有的生僻字，可以下载对应的ttf文件将其加载出来。

核心代码

与场景二相同。

常见问题

Q：在page中注册字体没问题，移到UIAbility时会偶现字体注册失败，希望提供一个稳定在UIAbility注册字体的方案。

A：在onCreate中注册字体时，页面还未创建，所以字体未生效，需要在页面创建完成之后再加载字体，推荐在页面注册回调windowStage.loadContent中进行字体注册。

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。 

为了确保高效学习，建议规划清晰的学习路线

GitCode - 全球开发者的开源社区,开源代码托管平台 希望这一份鸿蒙学习文档能够给大家带来帮助~

---

 鸿蒙（HarmonyOS NEXT）最新学习路线

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.学习视频+学习PDF文档

HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

​​

 纯血版鸿蒙全套学习文档（面试、文档、全套视频等）

                   

​​​​鸿蒙APP开发必备

​​

总结

【纯血版鸿蒙全套最新学习文档】

总的来说，华为鸿蒙不再兼容安卓，对程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。