Text 组件并设置其字体样式？

Question

Text 组件并设置其字体样式？

Answer 1

可以通过decoration、letterSpacing、textCase、fontFamily、textShadow、fontStyle、textIndent、fontWeight属性展示了不同样式的文本效果。
参考以下示例：
@Extend(Text)
function style() {
.font({ size: 12 })
.border({ width: 1 })
.padding(10)
.width('100%')
.margin(5)
}

@Entry
@Component
struct TextExample2 {
@State changeDecorationIndex: number = 0;
@State TextDecorationType: TextDecorationType[] =

[TextDecorationType.LineThrough, TextDecorationType.Overline, TextDecorationType.Underline];

@State TextDecorationTypeStr: string[] = ['LineThrough', 'Overline', 'Underline'];
@State TextDecorationStyle: TextDecorationStyle[] =

[TextDecorationStyle.SOLID, TextDecorationStyle.DOTTED, TextDecorationStyle.WAVY];

@State TextDecorationStyleStr: string[] = ['SOLID', 'DOTTED', 'WAVY'];

build() {

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
  Text('decoration').fontSize(9).fontColor(0xCCCCCC)
  Text('This is the text content with the decoration set to LineThrough and the color set to Red.')
    .decoration({
      type: this.TextDecorationType[this.changeDecorationIndex],
      color: Color.Red,
      style: this.TextDecorationStyle[this.changeDecorationIndex]
    })
    .style()
    .margin(5)

  Row() {
    Button('当前decoration类型：' + this.TextDecorationTypeStr[this.changeDecorationIndex] + ' & ' +
    this.TextDecorationStyleStr[this.changeDecorationIndex]).onClick(() => {
      this.changeDecorationIndex++;
      if (this.changeDecorationIndex > (this.TextDecorationTypeStr.length - 1)) {
        this.changeDecorationIndex = 0;
      }
    })
  }.justifyContent(FlexAlign.Center).width('100%')

  // 文本字符间距
  Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
  Text('This is the text content with letterSpacing 0.')
    .letterSpacing(0)
    .style()
  Text('This is the text content with letterSpacing 3.')
    .letterSpacing(3)
    .style()
  Text('This is the text content with letterSpacing -1.')
    .letterSpacing(-1)
    .style()

  Text('textCase').fontSize(9).fontColor(0xCCCCCC)
  Text('This is the text content with textCase set to Normal.')
    .textCase(TextCase.Normal)
    .style()
  // 文本全小写展示
  Text('This is the text content with textCase set to LowerCase.')
    .textCase(TextCase.LowerCase)
    .style()
  // 文本全大写展示
  Text('This is the text content with textCase set to UpperCase.')
    .textCase(TextCase.UpperCase)
    .style()

  Text('fontFamily').fontSize(9).fontColor(0xCCCCCC)
  // 设置字体列表
  Text('This is the text content with fontFamily')
    .style()
    .fontFamily('HarmonyOS Sans')

  Text('textShadow').fontSize(9).fontColor(0xCCCCCC)
  // 设置文字阴影效果
  Text('textShadow')
    .style()
    .textAlign(TextAlign.Center)
    .fontSize(40)
    .textShadow({
      radius: 10,
      color: Color.Black,
      offsetX: 0,
      offsetY: 0
    })

  Text('fontStyle').fontSize(9).fontColor(0xCCCCCC)
  // 设置字体样式
  Text('This is the text content with fontStyle set to Italic')
    .style()
    .fontStyle(FontStyle.Italic)
  Text('This is the text content with fontStyle set to Normal')
    .style()
    .fontStyle(FontStyle.Normal)

  Text('textIndent').fontSize(9).fontColor(0xCCCCCC)
  // 设置文字缩进
  Text('This is the text content with textIndent 30')
    .style()
    .textIndent(30)

  Text('fontWeight').fontSize(9).fontColor(0xCCCCCC)
  // 设置文本的字体粗细
  Text('This is the text content with fontWeight 800')
    .style()
    .fontWeight('800', { enableVariableFontWeight: true })

}.width('100%').padding({ left: 35, right: 35 })

}
}