哪些属性控制文本和字体?

Question

哪些属性控制文本和字体?

Accepted Answer

Typography 由 `font-*` 和 `text-*` 属性族控制。正确设置它们是使页面看起来精致且可读的大部分工作。

```css
.text {
  font-family: "Inter", system-ui, sans-serif; /* with fallbacks */
  font-size: 1rem;       /* size (use rem for accessibility) */
  font-weight: 600;      /* 100–900; 400 normal, 700 bold */
  font-style: italic;    /* normal | italic */
  line-height: 1.5;      /* spacing between lines — unitless is best */
  letter-spacing: 0.02em;/* tracking between characters */
}
```

## font-family 回退堆栈

```css
font-family: "Inter", system-ui, -apple-system, sans-serif;
```

浏览器依次尝试每个字体，直到找到可用的为止。始终以**通用字体族** (`sans-serif`、`serif`、`monospace`) 结尾，以便在自定义字体失败时仍能呈现文本。`system-ui` 使用操作系统的原生字体（快速，无需下载）。

## 文本布局属性

```css
.text {
  text-align: center;        /* left | right | center | justify */
  text-decoration: underline;/* underline | line-through | none */
  text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
  white-space: nowrap;       /* prevent wrapping */
  word-break: break-word;    /* break long words/URLs */
}
```

## line-height: 使用无单位值

```css
line-height: 1.5;    /* ✅ 1.5 × the element's font-size — scales correctly */
line-height: 24px;   /* ⚠️ fixed — doesn't adapt if font-size changes */
```

**无单位** `line-height` 将每个元素的 font-size 相乘，所以当嵌套元素有不同大小时它保持成比例——这是推荐的方法。

## 截断文本（常见需求）

```css
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* shows "..." when text is cut off */
}
```

## 为什么这很重要

文本属性驱动可读性和视觉层次——用 `font-size`/`weight` 表示强调，用 `line-height`（~1.5）实现舒适阅读，用回退堆栈确保可靠性，用 `text-overflow` 实现清晰截断。

好的排版是优质 UI 的大部分。