1# Universal Text Attributes 2 3Universal text attributes include text style attributes applicable to text containers. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9## fontColor 10 11fontColor(value: ResourceColor) 12 13Sets the font color. 14 15**Widget capability**: This API can be used in ArkTS widgets since API version 9. 16 17**Atomic service API**: This API can be used in atomic services since API version 11. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name| Type | Mandatory| Description | 24| ------ | ------------------------------------------ | ---- | ---------- | 25| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color.| 26 27## fontSize 28 29fontSize(value: number | string | Resource) 30 31Sets the font size. 32 33**Widget capability**: This API can be used in ArkTS widgets since API version 9. 34 35**Atomic service API**: This API can be used in atomic services since API version 11. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39**Parameters** 40 41| Name| Type | Mandatory| Description | 42| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 43| value | [Resource](ts-types.md#resource) \| number \| string | Yes | Font size. If **fontSize** is of the number type, the unit fp is used. The default font size is 16 fp. For the string type, numeric string values with optional units, for example, **"10"** or **"10fp"**, are supported. Percentage values are not supported.| 44 45## fontStyle 46 47fontStyle(value: FontStyle) 48 49Sets the font style. 50 51**Widget capability**: This API can be used in ArkTS widgets since API version 9. 52 53**Atomic service API**: This API can be used in atomic services since API version 11. 54 55**System capability**: SystemCapability.ArkUI.ArkUI.Full 56 57**Parameters** 58 59| Name| Type | Mandatory| Description | 60| ------ | ------------------------------------------- | ---- | --------------------------------------- | 61| value | [FontStyle](ts-appendix-enums.md#fontstyle) | Yes | Font style.<br>Default value: **FontStyle.Normal**| 62 63## fontWeight 64 65fontWeight(value: number | FontWeight | string) 66 67Sets the font weight. If the value is too large, the text may be clipped depending on the font. 68 69**Widget capability**: This API can be used in ArkTS widgets since API version 9. 70 71**Atomic service API**: This API can be used in atomic services since API version 11. 72 73**System capability**: SystemCapability.ArkUI.ArkUI.Full 74 75**Parameters** 76 77| Name| Type | Mandatory| Description | 78| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 79| value | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | Yes | Font weight. For the number type, the value range is [100, 900], at an interval of 100. The default value is **400**. A larger value indicates a heavier font weight. For the string type, only strings that represent a number, for example, **"400"**, and the following enumerated values of **FontWeight** are supported: **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**.<br>Default value: **FontWeight.Normal**| 80 81## fontFamily 82 83fontFamily(value: string | Resource) 84 85Sets the font family. 86 87**Widget capability**: This API can be used in ArkTS widgets since API version 9. 88 89**Atomic service API**: This API can be used in atomic services since API version 11. 90 91**System capability**: SystemCapability.ArkUI.ArkUI.Full 92 93**Parameters** 94 95| Name| Type | Mandatory| Description | 96| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 97| value | [Resource](ts-types.md#resource) \| string | Yes | Font family. Default font: **'HarmonyOS Sans'**<br>The 'HarmonyOS Sans' font and [registered custom fonts](../js-apis-font.md) are supported for applications.<br>Only the 'HarmonyOS Sans' font is supported for widgets.| 98 99## lineHeight 100 101lineHeight(value: number | string | Resource) 102 103Sets the text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. 104 105**Widget capability**: This API can be used in ArkTS widgets since API version 9. 106 107**Atomic service API**: This API can be used in atomic services since API version 11. 108 109**System capability**: SystemCapability.ArkUI.ArkUI.Full 110 111**Parameters** 112 113| Name| Type | Mandatory| Description | 114| ------ | ------------------------------------------------------------ | ---- | ---------------------------------- | 115| value | [Resource](ts-types.md#resource) \| number \| string | Yes | Text line height. For number values, the unit is fp.| 116 117## decoration 118 119decoration(value: DecorationStyleInterface) 120 121Sets the style and color for the text decorative line. 122 123**Widget capability**: This API can be used in ArkTS widgets since API version 9. 124 125**Atomic service API**: This API can be used in atomic services since API version 11. 126 127**System capability**: SystemCapability.ArkUI.ArkUI.Full 128 129**Parameters** 130 131| Name| Type | Mandatory| Description | 132| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 133| value | [DecorationStyleInterface<sup>12+</sup>](ts-universal-styled-string.md#decorationstyleinterface) | Yes | Style of the text decorative line.<br>Default value:<br>{<br> type: TextDecorationType.None,<br> color: Color.Black,<br> style: TextDecorationStyle.SOLID <br>}<br>**NOTE**<br>The **style** parameter cannot be used in widgets.| 134 135## Example 136 137This example showcases various text styles by using the **fontColor**, **fontSize**, **fontStyle**, and **fontWeight** attributes. 138 139```ts 140// xxx.ets 141@Entry 142@Component 143struct TextStyleExample { 144 build() { 145 Column({ space: 8 }) { 146 Text('default text') 147 148 Text('text font color red').fontColor(Color.Red) 149 150 Text('text font default') 151 Text('text font size 10').fontSize(10) 152 Text('text font size 10fp').fontSize('10fp') 153 Text('text font size 20').fontSize(20) 154 155 Text('text font style Italic').fontStyle(FontStyle.Italic) 156 157 Text('text fontWeight bold').fontWeight(700) 158 Text('text fontWeight lighter').fontWeight(FontWeight.Lighter) 159 160 Text('red 20 Italic bold text') 161 .fontColor(Color.Red) 162 .fontSize(20) 163 .fontStyle(FontStyle.Italic) 164 .fontWeight(FontWeight.Bold) 165 166 Text('Orange 18 Normal text') 167 .fontColor(Color.Orange) 168 .fontSize(18) 169 .fontStyle(FontStyle.Normal) 170 171 Text('text lineHeight 30') 172 .lineHeight(30) 173 .backgroundColor(Color.Gray) 174 175 Text('text fontFamily HarmonyOS Sans') 176 .fontFamily("HarmonyOS Sans") 177 178 Text('Underline Black SOLID decoration text') 179 .decoration({ 180 type: TextDecorationType.Underline, 181 color: Color.Black, 182 style: TextDecorationStyle.SOLID 183 }) 184 Text('Overline Red DOTTED decoration text') 185 .decoration({ 186 type: TextDecorationType.Overline, 187 color: Color.Red, 188 style: TextDecorationStyle.DOTTED 189 }) 190 Text('LineThrough Orange SOLID decoration text') 191 .decoration({ 192 type: TextDecorationType.LineThrough, 193 color: Color.Orange, 194 style: TextDecorationStyle.WAVY 195 }) 196 }.width('100%') 197 } 198} 199``` 200 201 202
