HarmonyOS 自定义字体绘制

问题1:

在这个库里面的这个getGlobalInstance的接口无法调用到，参照例子写直接报错，是否文档有误？

import { text } from "@kit.ArkGraphics2D"

function Text() {
  let fontCollection = text.FontCollection.getGlobalInstance();
  fontCollection.loadFontSync('test', 'File://');
}
1.
2.
3.
4.
5.
6.

问题2:如何通过fontCollection使用不同的系统内置字体查看效果，系统内置字体如下：

declare type FontFamily = 'sans-serif' | 'serif' | 'monospace' 
1.

请举例说明，show code，

HarmonyOS

fox280

2024-12-27 16:26:50

浏览

回答 1

按赞同

按时间

aquaa

1：升到最新版本

2：设置TextStyle的fontFamilies

fontFamilies设置字体对应的家族名称

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-graphics-text.md#textstyle

import { font } from '@kit.ArkUI';

interface FontInfo {
  familyName: string;
  path: string | undefined;
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  @State genericFonts: Array<FontInfo> = [];
  @State fallbackFonts: Array<FontInfo> = [];

  aboutToAppear(): void {
    let fontInfo = font.getUIFontConfig();
    console.log(`systest ${JSON.stringify(fontInfo)}`);

    for (let f of fontInfo.generic) {
      let info = font.getFontByName(f.family);
      this.genericFonts.push({
        familyName: f.family,
        path: info?.path,
      });
      console.log(`systest generic ${f.family}, ${info?.path}`);
    }

    for (let group of fontInfo.fallbackGroups) {
      for (let fallback of group.fallback) {
        let info = font.getFontByName(fallback.family);
        this.fallbackFonts.push({
          familyName: fallback.family,
          path: info?.path,
        });
        console.log(`systest fallback ${fallback.family}, ${fallback.language}, ${info?.path}`);
      }
    }
  }

  build() {
    Scroll() {
      Column({space: 5}) {
        Text('genericFonts')
        ForEach(this.genericFonts, (item: FontInfo, index: number) => {
          Text(`123 abcd 中文 - ${item.familyName}`)
            .fontSize(15)
            .fontFamily(item.familyName)
        })
        Text('fallbackFonts')
        ForEach(this.fallbackFonts, (item: FontInfo, index: number) => {
          Text(`123 abcd 中文 - ${item.familyName}`)
            .fontSize(15)
            .fontFamily(item.familyName)
        })
      }
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.

获取系统字体信息用font.getUIFontConfig和font.getFontByName，可以获取到path

2024-12-27 19:34:25

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 自定义字体绘制

订阅鸿蒙技术特刊，精选内容抢先看