harmony 鸿蒙Universal Text Attributes

2022-08-09
浏览 (750)

Universal Text Attributes

Universal text attributes include text style attributes applicable to text containers.

NOTE

The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Attributes

Name	Type	Description
fontColor	ResourceColor	Font color. Since API version 9, this API is supported in ArkTS widgets.
fontSize	Length	Font size. If the value is of the number type, the unit fp is used. The default font size is 16. This attribute cannot be set in percentage. Since API version 9, this API is supported in ArkTS widgets.
fontStyle	FontStyle	Font style. Default value: FontStyle.Normal Since API version 9, this API is supported in ArkTS widgets.
fontWeight	number \|FontWeight \|string	Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is 400. A larger value indicates a larger font weight. The string type supports only the string of the number type, for example, 400, “bold”, “bolder”, “lighter”, “regular”, and “medium”, which correspond to the enumerated values in FontWeight. Default value: FontWeight.Normal Since API version 9, this API is supported in ArkTS widgets.
fontFamily	string \|Resource	Font family. The HarmonyOS Sans font and register custom fonts are supported. Since API version 9, this API is supported in ArkTS widgets.
lineHeight	string \|number \|Resource	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. If the value is of the number type, the unit fp is used. Since API version 9, this API is supported in ArkTS widgets.
decoration	{ type: TextDecorationType, color?: ResourceColor }	Style and color of the text decorative line. Default value: { type: TextDecorationType.None, color: Color.Black } Since API version 9, this API is supported in ArkTS widgets.

Example

// xxx.ets
@Entry
@Component
struct TextStyleExample {
  build() {
    Column({ space: 5 }) {
      Text('default text')
      
      Text('text font color red').fontColor(Color.Red)
      
      Text('text font default')
      Text('text font size 10').fontSize(10)
      Text('text font size 10fp').fontSize('10fp')
      Text('text font size 20').fontSize(20)
      
      Text('text font style Italic').fontStyle(FontStyle.Italic)
      
      Text('text fontWeight bold').fontWeight(700)
      Text('text fontWeight lighter').fontWeight(FontWeight.Lighter)
      
      Text('red 20 Italic bold text')
        .fontColor(Color.Red)
        .fontSize(20)
        .fontStyle(FontStyle.Italic)
        .fontWeight(FontWeight.Bold)
      
      Text('Orange 18 Normal text')
        .fontColor(Color.Orange)
        .fontSize(18)
        .fontStyle(FontStyle.Normal)
    }.width('100%')
  }
}

textstyle