1# 系统字体的信息获取和使用（ArkTS） 2 3## 场景介绍 4 5系统字体是指操作系统预设的字体，用于在没有指定自定义字体时显示文本，确保文本的可读性和一致性。 6 7**使用系统字体**的情况通常是在应用未注册自定义字体，或在没有显式指定文本样式时，系统会使用默认的系统字体。另外，系统字体有多种，开发者可以先获取系统字体的配置信息，并根据信息中的字体家族名来进行系统字体的切换和使用。 8 9当前ArkTS侧暂不支持禁用系统字体，Native侧支持禁用系统字体。 10 11## 接口说明 12 13以下是系统字体相关的常用接口和结构体，ArkTS侧对外接口由ArkUI提供，详细接口说明请见[@ohos.font](../reference/apis-arkui/js-apis-font.md)。 14 15| 接口名 | 描述 | 16| -------- | -------- | 17| getUIFontConfig() : UIFontConfig | 获取系统字体配置。 | 18 19## 获取系统字体信息 20 211. 导入依赖的相关模块。 22 23 ```ts 24 import { font } from '@kit.ArkUI' 25 ``` 26 272. 获取系统字体信息。 28 29 ```ts 30 @Entry 31 @Component 32 struct FontExample { 33 build() { 34 Column() { 35 Button("getUIFontConfig") 36 .width('60%') 37 .height('6%') 38 .margin(50) 39 .onClick(()=>{ 40 let fontConfig = font.getUIFontConfig(); 41 }) 42 }.width('100%') 43 } 44 } 45 ``` 46 473. 通过日志打印字体信息。 48 49 ```ts 50 @Entry 51 @Component 52 struct FontExample { 53 build() { 54 Column() { 55 Button("getUIFontConfig") 56 .width('60%') 57 .height('6%') 58 .margin(50) 59 .onClick(()=>{ 60 let fontConfig = font.getUIFontConfig(); 61 console.info("font-dir -----------" + String(fontConfig.fontDir.length)); 62 for (let i = 0; i < fontConfig.fontDir.length; i ++) { 63 console.info(fontConfig.fontDir[i]); 64 } 65 console.info("generic-------------" + String(fontConfig.generic.length)); 66 for (let i = 0; i < fontConfig.generic.length; i ++){ 67 console.info("family:" + fontConfig.generic[i].family); 68 for (let j = 0; j < fontConfig.generic[i].alias.length; j ++){ 69 console.info(fontConfig.generic[i].alias[j].name + " " + fontConfig.generic[i].alias[j].weight); 70 } 71 } 72 console.info("fallback------------" + String(fontConfig.fallbackGroups.length)); 73 for (let i = 0; i < fontConfig.fallbackGroups.length; i ++){ 74 console.info("fontSetName:" + fontConfig.fallbackGroups[i].fontSetName); 75 for (let j = 0; j < fontConfig.fallbackGroups[i].fallback.length; j ++){ 76 console.info("language:" + fontConfig.fallbackGroups[i].fallback[j].language + " family:" + fontConfig.fallbackGroups[i].fallback[j].family); 77 } 78 } 79 }) 80 }.width('100%') 81 } 82 } 83 ``` 84 以下打印的示例为应用设备系统对应的部分系统字体配置信息情况，不同设备系统配置信息可能不同，此处仅示意。 85 86  87 88## 使用或切换系统字体 89 90系统字体可以有多种，可以先获取系统字体配置信息，再根据其中的字体家族名（即TextStyle中的fontFamilies）来进行系统字体的切换和使用。 91 92如果不指定使用任何字体时，会使用系统默认字体“HarmonyOS Sans”显示文本。 93 941. 创建textStyle1，指定fontFamilies为“HarmonyOS Sans SC”，默认中文字体为“HarmonyOS Sans SC”。 95 96 ```ts 97 let textStyle1: text.TextStyle = { 98 color: { alpha: 255, red: 255, green: 0, blue: 0 }, 99 fontSize: 100, 100 fontFamilies:['HarmonyOS Sans SC'] 101 }; 102 ``` 103 1042. 创建textStyle2，指定fontFamilies为“HarmonyOS Sans TC”（该两种字体易于观察同一文字字型差异）。 105 106 ```ts 107 let textStyle2: text.TextStyle = { 108 color: { alpha: 255, red: 255, green: 0, blue: 0 }, 109 fontSize: 100, 110 fontFamilies:['HarmonyOS Sans TC'] 111 }; 112 ``` 113 1143. 创建段落生成器。 115 116 ```ts 117 let myParagraphStyle: text.ParagraphStyle = { 118 textStyle: textStyle1, 119 align: 3, 120 wordBreak:text.WordBreak.NORMAL 121 }; 122 let fontCollection = text.FontCollection.getGlobalInstance() 123 let ParagraphGraphBuilder = new text.ParagraphBuilder(myParagraphStyle, fontCollection) 124 ``` 125 1264. 将textStyle1添加到段落样式中，再添加文字。 127 128 ```ts 129 let str:string = "模块描述\n" 130 ParagraphGraphBuilder.pushStyle(textStyle1); 131 ParagraphGraphBuilder.addText(str); 132 ``` 133 1345. 将textStyle2添加到段落样式中，再添加文字。 135 136 ```ts 137 ParagraphGraphBuilder.pushStyle(textStyle2); 138 ParagraphGraphBuilder.addText(str); 139 ``` 140 1416. 生成段落，用于后续绘制使用。 142 143 ```ts 144 let paragraph = ParagraphGraphBuilder.build() 145 ``` 146 147效果展示如下： 148 149 150
