Text组件如何改变部分文本样式？

Question

单独使用Text组件，传入文本，如何设置文本部分字体颜色和大小，实现富文本效果

Answer 1

单个组件只能设置一种字体样式和大小，但是可以通过多个组件来实现一行文本展示不同的样式

参考demo:

@Entry
@Component
struct TestDemoPage {
  @State message:string = "Hello World";

  build() {
    Row() {
      Column() {
        Text() {
          Span('测试文本: ')
            .fontSize(20)
            .fontWeight(FontWeight.Bolder)
            .fontColor(Color.Black)
          Span(this.message)
            .fontSize(15)
            .fontColor(Color.Red)
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}