动态加载网络字体文件

动态下载并设置网络字体

HarmonyOS
2024-05-28 20:29:08
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
l634youngpig

使用的核心API

下载网络字体

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/js-apis-request-0000001428061972-V2

解压zip文件

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V1/js-apis-zlib-0000001580185554-V1

页面路由

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-router-0000001820880773#ZH-CN_TOPIC_0000001820880773__基于ts扩展的声明式开发范式

设置字体文件(沙箱路径)

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/js-apis-font-0000001615346609-V2

核心代码解释

  • 下载网络字体
// 下载字体文件到指定沙箱路径下 
  download() { 
    let downloadPath = this.filePath + '/' + this.zipName; 
    console.warn('chisj debug : downloadPath = ', downloadPath); 
    try { 
      request.downloadFile(getContext(), 
        { url: 'http://11.bkillptdown.balanala.cn:8066/1408/Pacifico.bkill.com.zip', filePath: downloadPath }) 
        .then((data: request.DownloadTask) => { 
          let downloadTask: request.DownloadTask = data; 
          let completeCallback = () => { 
            this.toast('已经下载了字体文件.') 
            // 下载完成 
            console.info('Download task completed.'); 
            // 确认下下载的文件是否存在 
            let exist = fs.accessSync(downloadPath); 
            console.warn('chisj debug : ', downloadPath, ' exist = ', exist); 
            this.toast(downloadPath + '确认文件存在' + exist); 
          }; 
          downloadTask.on('complete', completeCallback); 
        }).catch((err: BusinessError) => { 
        console.error(`Failed to request the download. Code: ${err.code}, message: ${err.message}`); 
      }) 
    } catch (err) { 
      console.error(`Failed to request the download. err: ${JSON.stringify(err)}`); 
    } 
  }
  •  解压zip文件
unzip() { 
    let context = getContext(this); 
    try { 
      let zipPath = this.filePath + '/' + this.zipName; 
      let exist = fs.accessSync(zipPath) 
      if (!exist) { 
        console.warn('zipFile not exist'); 
        this.toast(zipPath + '不存在') 
        // let file: ESObject = fs.openSync(zipPath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE) 
        // fs.writeSync(file.fd, context.resourceManager.getRawFileContentSync('Pacifico.zip').buffer); // 以同步方法将数据写入文件 
        // fs.fsyncSync(file.fd); // 以同步方法同步文件数据。 
        // fs.closeSync(file.fd); 
        return; 
      } 
      console.warn(zipPath, ' is exist'); 
  
      let outputPath = this.filePath + this.fontPath; 
      console.warn('outputPath is ', outputPath); 
      // 目录不存在,把本地证书解压到目标目录 
      fs.mkdirSync(outputPath) 
      let options: zlib.Options = { 
        level: zlib.CompressLevel.COMPRESS_LEVEL_DEFAULT_COMPRESSION 
      }; 
      zlib.decompressFile(zipPath, outputPath, options, (errData: BusinessError) => { 
        if (errData) { 
          console.warn('decompress file error: ', errData); 
          this.toast('解压文件失败' + errData); 
        } else { 
          console.warn('decompress file success'); 
          this.toast('解压文件成功'); 
        } 
      }) 
    } catch (err) { 
      console.warn('unzip file fail:' + err) 
    } 
  }
  • 跳转页面,携带参数
Button('goto next page') 
          .fontFamily('Pacifico') 
          .onClick(() => { 
            let fontPath = 'file:/' + this.filePath + this.fontPath + '/' + this.fontName; 
            console.warn('fontPath is = ', fontPath); 
            router.pushUrl({ 
              url: 'pages/NextPage', 
              params: new FontPath(fontPath) 
            }) 
          })
  • 加载字体并显示
aboutToAppear(): void { 
    let filePath: string = (router.getParams() as FontPath).filePath; 
    let exist = fs.accessSync(filePath); 
    console.warn('chisj debug : ', filePath, ' exist = ', exist); 
    font.registerFont({ 
      familyName: 'Pacifico', 
      familySrc: 'file://data/storage/el2/base/haps/entry/files/font/Pacifico.ttf' 
    }) 
  } 
   
   
Text('back first page') 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
          .fontFamily('Pacifico') 
          .onClick(() => { 
            router.back(); 
          })

实现效果

注明适配的版本信息

IDE版本:4.1.3.500

SDK版本:HarmonyOS Next Developer Preview1

分享
微博
QQ
微信
回复
2024-05-29 21:30:44
相关问题
按需加载场景中加载动态模块失败
649浏览 • 1回复 待解决
HAP是否提供动态加载的能力
791浏览 • 1回复 待解决
如何使用和加载自定义字体
916浏览 • 1回复 待解决
字体文件如何复用?
2441浏览 • 1回复 待解决
ImageKnife无法加载网络jpeg图
618浏览 • 1回复 待解决
ArkTS和Native如何动态加载、卸载so
912浏览 • 1回复 待解决
是否支持模块的动态加载?如何实现
1056浏览 • 1回复 待解决
动态布局下加载loading效果实现
313浏览 • 1回复 待解决
Image组件如何加载网络图片
1124浏览 • 1回复 待解决
如何显示通过网络加载的图片?
1343浏览 • 1回复 待解决
基于原生能力的网络加载性能分析
297浏览 • 1回复 待解决
鸿蒙中如何自定义字体文件
18006浏览 • 1回复 待解决
JS开发服务卡加载图片网络受阻
5207浏览 • 1回复 待解决
页面加载前获取网络图片的宽高
268浏览 • 1回复 待解决