ts-universal-attributes-text-style.md 2.3 KB
Newer Older
Z
zengyawen 已提交
1 2
# 文本样式设置

H
geshi  
HelloCrease 已提交
3
>  **说明:**
4
>
Z
zengyawen 已提交
5
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
Z
zengyawen 已提交
6

Z
zengyawen 已提交
7 8 9

针对包含文本元素的组件,设置文本样式。

Z
zengyawen 已提交
10 11 12
## 属性


H
hebingxue 已提交
13 14 15 16 17
| 名称         | 参数类型                                      | 描述                                    |
| -----------| ---------------------------------------- | ------------------------------------ |
| fontColor  | [ResourceColor](ts-types.md#resourcecolor)  | 设置文本颜色。                                 |
| fontSize   | Length \| [Resource](ts-types.md#resource)  | 设置文本尺寸,Length为number类型时,使用fp单位。     |
| fontStyle  | [FontStyle](ts-appendix-enums.md#fontstyle)  | 设置文本的字体样式。<br>默认值:FontStyle.Normal         |
18
| fontWeight | number&nbsp;\|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string  | 设置文本的字体粗细,number类型取值[100,&nbsp;900],取值间隔为100,默认为400,取值越大,字体越粗。<br/>默认值:FontWeight.Normal  |
H
hebingxue 已提交
19
| fontFamily | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)  | 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial,&nbsp;sans-serif'。 |
Z
zengyawen 已提交
20 21 22


## 示例
Z
zengyawen 已提交
23

H
geshi  
HelloCrease 已提交
24 25
```ts
// xxx.ets
Z
zengyawen 已提交
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
@Entry
@Component
struct TextStyleExample {
  build() {
    Column({ space: 5 }) {
      Text('default text')

      Text('text font color red')
        .fontColor(Color.Red)

      Text('text font size 20')
        .fontSize(20)

      Text('text font style Italic')
        .fontStyle(FontStyle.Italic)

      Text('text fontWeight bold')
        .fontWeight(700)

      Text('text fontFamily sans-serif')
        .fontFamily('sans-serif')

      Text('red 20 Italic bold cursive text')
        .fontColor(Color.Red)
        .fontSize(20)
        .fontStyle(FontStyle.Italic)
        .fontWeight(700)
        .fontFamily('cursive')
        .textAlign(TextAlign.Center)
        .width('90%')

      Text('Orange 18 Normal source-sans-pro text')
        .fontColor(Color.Orange)
        .fontSize(18)
        .fontStyle(FontStyle.Normal)
        .fontWeight(400)
        .fontFamily('source-sans-pro,cursive,sans-serif')
    }.width('100%')
  }
}
```

Z
zengyawen 已提交
68
![zh-cn_image_0000001219662673](figures/zh-cn_image_0000001219662673.png)