鸿蒙-case案例动态注册字体

鸿蒙case案例，动态改变字体样式，通过点击不同字体按钮，更改为对应的字体

1. 给文字设置fontFamily属性，动态切换字体

Text('点击改变按钮，切换不同的字体样式，快来试试')
  .fontFamily(this.currentFont)
  .fontSize(18)
  .margin({ top: 10 })
  .padding(20)
  .width("70%")
  .borderRadius(20)
  .backgroundColor('#ffefefef')

2. Progress点击加载和切换字体

Progress 进度条组件

Progress(options: ProgressOptions<Type>)

• ProgressOptions<Type>对象

  • value 指定当前进度值，默认0 number类型

  • total 指定进度总长，默认100 number类型

  • type 指定进度条类型

    • ProgressTyp枚举
    1. Linear 线性样式
    2. Ring 环形无刻度样式
    3. Eclipse 圆形样式
    4. ScaleRing 环形有刻度样式
    5. Capsule 胶囊样式

  • style 指定进度条样式

Progress({ value: this.downloadNow, total: this.downloadTotal, type: ProgressType.Capsule })
  .width("40%")
  .height(40)
  // CapsuleStyleOptions
  .style({
    content: this.progressContent,  // 文本内容
    showDefaultPercentage: true,  // 显示百分比文本的开关
    borderColor: '#ff3f89fd',  // 内描边颜色
    fontColor: this.progressFontColor  // 文本颜色
  })
  .color(this.progressColor)  // 设置进度条前景色
  .backgroundColor(this.progressBgColor)  // 进度条底色
  .onClick((event: ClickEvent) => {
    this.useFont()
  })

3. useFont()函数改变字体

• 判断文件沙箱路径是否存在，存在注册使用

fs.accessSync

以同步方法检查文件是否存在。

accessSync(path: string, mode?: AccessModeType): boolean

• path 文件应用沙箱路径。
• mode 文件校验的权限。

font.registerFont

在字体管理中注册自定义字体。

• FontOptions
  • familyName 设置注册的字体名称。
  • familySrc 设置注册字体文件的路径。

const filePath = CACHE_DIR + FILE_NAME
let res = fs.accessSync(filePath)
if (res) {
  font.registerFont({
    familyName: sy,
    familySrc: FILE_HEADER + filePath
  })
  this.currentFont = sy
  return
}

• 不存在沙箱文件，下载字体文件使用

downloadFile(context: BaseContext, config: DownloadConfig, callback: AsyncCallback<DownloadTask>): void;

context 基于应用程序的上下文。 config 下载的配置信息。 downloadTask 监听下载任务对象

try {
// 设置文本内容、前景色、字体颜色、背景色
  this.progressContent = loadingText
  this.progressColor = '#ffefefef'
  this.progressFontColor = '#ff182431'
  this.progressBgColor = '#ffffffff'
  // 下载沙箱文件
  request.downloadFile(getContext(), {
    url: URL,
    filePath: filePath
  }, (err, downloadTask) => {
    if (err) {
      Log.info(err, 'error info')
      return
      ...
    }
  })
} catch (err) {
  Log.info(err, `downloadFile error`)
}

• downloadTask任务对象监听

fs.unlink

删除单个文件

unlink(path: string): Promise<void>

path 文件的应用沙箱路径

// 监听下载进度信息
  downloadTask.on('progress', (now, total) => {
      this.progressContent = loadingText;
      this.downloadNow = now
      this.downloadTotal = total
    })
// 监听下载任务完成
    downloadTask.on('complete', () => {
      this.progressColor = '#ff3f89fd'
      this.progressFontColor = '#ffffff'
      this.progressBgColor = '#ff3f89fd'
      this.progressContent = sy
      downloadTask.off('progress')  // 取消下载进度监听
      downloadTask.off('fail')  // 取消下载任务失败监听
      font.registerFont({
        familyName: sy,
        familySrc: FILE_HEADER + filePath
      })
      this.currentFont = sy
    })
 // 监听下载任务失败
    downloadTask.on('fail', (err: number) => {
      let res = fs.accessSync(filePath)
      if (res) {
        fs.unlink(filePath)
        downloadTask.off('fail')
      }
    })
    ```