Typography
排版标记用于在整个应用中保持一致的字体样式集。
字体系列
字体系列属性用于指定优先级列表的字体名称。
系统字体堆栈是默认使用的：
- Windows上为
Segoe UI - Android和Chrome OS上为
Roboto - macOS和iOS上为
San Francisco - 在其他系统上，使用
Helvetica, Arial作为备用。
您可以使用--dwc-font-family自定义属性来应用或更改字体系列。
示例
:root {
--dwc-font-family: "Roboto", sans-serif;
}
变量
| 变量 | 默认值 | 示例 |
|---|---|---|
--dwc-font-family-sans | -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' | 黑色石英的斯芬克斯，裁判我的誓言。 |
--dwc-font-family-mono | Menlo, Monaco, 'Courier New', monospace | 黑色石英的斯芬克斯，裁判我的誓言。 |
--dwc-font-family | var(--dwc-font-family-sans) | 黑色石英的斯芬克斯，裁判我的誓言。 |
字体大小
字体大小属性定义了一组可选择的字体大小。s是标准大小，默认用于大多数组件。所有字体大小均以em为单位定义。
示例
.title {
font-size: var(--dwc-font-size-3xl);
}
变量
| 变量 | 默认值 | 示例 |
|---|---|---|
--dwc-font-size-2xs | 0.75rem | Aa |
--dwc-font-size-xs | 0.813rem | Aa |
--dwc-font-size-s | 0.875rem | Aa |
--dwc-font-size-m | 1rem | Aa |
--dwc-font-size-l | 1.125rem | Aa |
--dwc-font-size-xl | 1.375rem | Aa |
--dwc-font-size-2xl | 1.75rem | Aa |
--dwc-font-size-3xl | 2.25rem | Aa |
--dwc-font-size | var(--dwc-font-size-s) | Aa |
字体粗细
font-weight CSS 属性设置字体的粗细（或加粗程度）。
示例
p {
font-weight: var(--dwc-font-weight-semibold);
}
| 变量 | 默认值 | 示例 |
|---|---|---|
--dwc-font-weight-lighter | 200 | Aa |
--dwc-font-weight-light | 300 | Aa |
--dwc-font-weight-normal | 400 | Aa |
--dwc-font-weight-semibold | 500 | Aa |
--dwc-font-weight-bold | 700 | Aa |
--dwc-font-weight-bolder | 800 | Aa |
行高
line-height CSS 属性设置行框的高度。它通常用于设置文本行之间的距离。
示例
p {
line-height: var(--dwc-font-line-height-m);
}
变量
| 变量 | 默认值 | 示例 |
|---|---|---|
--dwc-font-line-height-2xs | 0.95 | 黑色石英的斯芬克斯，裁判我的誓言。 黑色石英的斯芬克斯，裁判我的誓言。 |
--dwc-font-line-height-xs | 1.1 | 黑色石英的斯芬克斯，裁判我的誓言。 黑色石英的斯芬克斯，裁判我的誓言。 |
--dwc-font-line-height-s | 1.25 | 黑色石英的斯芬克斯，裁判我的誓言。 黑色石英的斯芬克斯，裁判我的誓言。 |
--dwc-font-line-height-m | 1.375 | 黑色石英的斯芬克斯，裁判我的誓言。 黑色石英的斯芬克斯，裁判我的誓言。 |
--dwc-font-line-height-l | 1.5 | 黑色石英的斯芬克斯，裁判我的誓言。 黑色石英的斯芬克斯，裁判我的誓言。 |
--dwc-font-line-height-xl | 1.75 | 黑色石英的斯芬克斯，裁判我的誓言。 黑色石英的斯芬克斯，裁判我的誓言。 |
--dwc-font-line-height-2xl | 2 | 黑色石英的斯芬克斯，裁判我的誓言。 黑色石英的斯芬克斯，裁判我的誓言。 |
--dwc-font-line-height | var(--dwc-font-line-height-m) | 黑色石英的斯芬克斯，裁判我的誓言。 黑色石英的斯芬克斯，裁判我的誓言。 |