harmony 鸿蒙文本通用

2025-06-12
浏览 (4)

文本通用

文本通用属性目前只针对包含文本元素的组件，设置文本样式。

说明：

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

fontColor

fontColor(value: ResourceColor)

设置字体颜色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	ResourceColor	是	字体颜色。

参数名	类型	必填	说明
value	Resource \| number \| string	是	字体大小。fontSize为number类型时，使用fp单位。字体默认大小16fp。string类型支持number类型取值的字符串形式，可以附带单位，例如”10”、”10fp”，不支持设置百分比字符串。

fontStyle

fontStyle(value: FontStyle)

设置字体样式。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	FontStyle	是	字体样式。默认值：FontStyle.Normal

fontWeight

fontWeight(value: number|FontWeight|string)

设置文本的字体粗细，设置过大可能会在不同字体下有截断。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	FontWeight \| number \| string	是	文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如”400”，以及”bold”、”bolder”、”lighter”、”regular”、”medium”，分别对应FontWeight中相应的枚举值。默认值：FontWeight.Normal

fontFamily

fontFamily(value: string|Resource)

设置字体列表。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Resource \| string	是	字体列表。默认字体’HarmonyOS Sans’。应用当前支持’HarmonyOS Sans’字体和注册自定义字体。卡片当前仅支持’HarmonyOS Sans’字体。

lineHeight

lineHeight(value: number|string|Resource)

设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Resource \| number \| string	是	文本行高，为number类型时单位为fp。

decoration

decoration(value: DecorationStyleInterface)

设置文本装饰线样式及其颜色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	DecorationStyleInterface¹²⁺	是	文本装饰线样式对象。默认值： {  type: TextDecorationType.None,  color: Color.Black,  style: TextDecorationStyle.SOLID  } 说明： style参数不支持卡片能力。

示例

该示例通过fontColor、fontSize、fontStyle、fontWeight属性展示了不同样式的文本效果。

// xxx.ets
@Entry
@Component
struct TextStyleExample {
  build() {
    Column({ space: 8 }) {
      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)

      Text('text lineHeight 30')
        .lineHeight(30)
        .backgroundColor(Color.Gray)

      Text('text fontFamily HarmonyOS Sans')
        .fontFamily("HarmonyOS Sans")

      Text('Underline Black SOLID decoration text')
        .decoration({
          type: TextDecorationType.Underline,
          color: Color.Black,
          style: TextDecorationStyle.SOLID
        })
      Text('Overline Red DOTTED decoration text')
        .decoration({
          type: TextDecorationType.Overline,
          color: Color.Red,
          style: TextDecorationStyle.DOTTED
        })
      Text('LineThrough Orange SOLID decoration text')
        .decoration({
          type: TextDecorationType.LineThrough,
          color: Color.Orange,
          style: TextDecorationStyle.WAVY
        })
    }.width('100%')
  }
}

textstyle