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