HarmonyOS 怎么设置自定义字体并获取自定义字体的宽度,高度

需要使用自定义字体时,发现用以下代码,取到的字体是:HarmonyOS Sans SC,怎么才能设置自定义字体并获取自定义字体的宽度,高度信息?

let font=new drawing.Font(); 
font.setTypeface(new drawing.Typeface()) 
console.info("ddd",font.getTypeface().getFamilyName());
HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

关于自定义字体:自定义字体支持使用网络字体,引入ttf文件后,有对应的Iconfont才能显示,参考下面代码:

import font from ‘@ohos.font’;
@Entry
@Component
struct Index {
  @State message: string = ‘Hello World’;

  aboutToAppear() {

    font.registerFont({
      familyName: ‘iconfont’,
      familySrc: $rawfile(‘iconfont.ttf’)
    })
  }

  build() {
    Row() {
      Column() {
        Text("\ue6fb")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontFamily(“iconfont”)
        Image(“xxxx”)
        .alt($r(“app.media.startIcon”))
        .width(300)
          .height(300)
          .onError(() => {
            console.log(“图片加载失败。。。”)
          })
      }
      .width(‘100%’)
    }
    .height(‘100%’)
  }
}

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-font-V5

关于获取自定义字体宽高,可以使用measure.measureText方法,再结合fontSize, fontStyle和fontWeight使用进行文本测量:可参考如下代码:

import font from ‘@ohos.font’
import measure from ‘@ohos.measure’
@Entry
@Component
struct Index {
  @State text:string = ‘123456’
  @State familyName2:string = ‘20th_bold’
  @State textWidth: number = measure.measureText({
    textContent: this.text,
    fontFamily: this.familyName2,
    fontStyle:FontStyle.Normal,
    fontWeight: 100
  })
  @State textWidth2: number = measure.measureText({
    textContent: this.text,
    fontFamily: this.familyName2,
    fontStyle: FontStyle.Italic,
    fontWeight: FontWeight.Bolder
  })
  aboutToAppear(): void {
    font.registerFont({
      familyName: this.familyName2,
      familySrc: $rawfile(‘font/20th_bold.ttf’)
    })
  }

  build() {
    Row() {
      Column() {
        Text(this.text)
          .fontSize(30)
          .fontFamily(‘20th_bold’)
        .fontColor(’#333333’)
        .fontWeight(400)
        Text(我是自定义字体的测量宽度1:${this.textWidth}) //181
        Text(我是自定义字体的测量宽度2:${this.textWidth2}) //207
      }
      .width(‘100%’)
    }
    .height(‘100%’)
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 如何设置自定义字体
875浏览 • 1回复 待解决
HarmonyOS 全局设置自定义字体方法
11浏览 • 1回复 待解决
HarmonyOS 使用自定义字体
253浏览 • 1回复 待解决
如何自定义字体替换系统字体
456浏览 • 1回复 待解决
鸿蒙中如何自定义字体文件
19537浏览 • 1回复 待解决
如何使用和加载自定义字体
2215浏览 • 1回复 待解决
ArkUI中如何使用自定义字体
854浏览 • 2回复 待解决
Ark UI是否如何使用自定义字体
3285浏览 • 1回复 待解决
注册自定义字体在 webview 中无效
2360浏览 • 1回复 待解决
HarmonyOS 自定义组件如何获取高度
226浏览 • 1回复 待解决
HarmonyOS 自定义Dialog宽度
84浏览 • 1回复 待解决