CSS 文本与字体

文字是网页的主角——大部分用户来网页就是为了读字。怎么让文字好看、易读,这一篇讲清楚。重点掌握字体栈、字号、行高、对齐这四个最常用的属性,以及单行/多行省略号这种高频需求。

1. 字体相关属性(font-*)

.article {
  /* 字体栈:前面的没装就用后面的,最后兜底通用名 */
  font-family: "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;

  /* 字号:推荐用 rem(随根字号缩放,响应式友好) */
  font-size: 16px;
  font-size: 1rem;

  /* 字重:bold 加粗,normal 普通 */
  font-weight: bold;
  font-weight: 400;    /* 100~900,400=normal,700=bold */

  /* 字体风格:italic 斜体 */
  font-style: italic;

  /* 简写:style weight size/line-height family(顺序固定) */
  font: italic bold 16px/1.6 "Microsoft YaHei", sans-serif;
}

几个要点:

font-family 字体栈:写多个值,逗号分隔。浏览器从前往后试,前面没装就用后面的。中文字体栈结尾常写 sans-serif(无衬线兜底),保证最少能显示出来。引号包裹包含空格或中文的字体名。
字号单位:px 是绝对像素,rem 相对根字号(默认 16px)。响应式项目推荐用 rem——根字号一改,全站字体同比例缩放。
字重:400 是 normal,700 是 bold。100~900,但很多字体只有 normal 和 bold 两档,中间值会取最近的。
简写 font:顺序固定 style weight size/line-height family,简写会重置未写的属性,慎用。

2. 文本相关属性(text-*)

.article {
  /* 行高:建议 1.5~1.7,阅读最舒服 */
  line-height: 1.6;

  /* 对齐:left/center/right/justify(两端对齐) */
  text-align: justify;

  /* 颜色 */
  color: #333;

  /* 装饰线:none/underline/line-through(删除线) */
  text-decoration: underline;
  text-decoration: line-through;

  /* 大小写转换:uppercase/lowercase/capitalize */
  text-transform: uppercase;

  /* 字符间距和词间距 */
  letter-spacing: 0.05em;
  word-spacing: 0.1em;

  /* 缩进(段落首行缩进 2 个字) */
  text-indent: 2em;

  /* 文字阴影:x 偏移 y 偏移 模糊 颜色 */
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}

重点几个:

line-height 行高:建议设在 1.5 ~ 1.7,这是阅读体验的金标准。设纯数字(如 1.6)而非带单位(如 1.6em)更好——子元素会按自己的字号计算,不会继承一个固定值。
text-align:左对齐是默认。justify(两端对齐)适合大段正文,但中文用 justify 容易出现稀疏的行,慎用。
text-decoration:链接默认有下划线,做导航按钮时常设 none 去掉。line-through 是删除线,常用于显示"原价划掉"。
letter-spacing:字符间距,稍微加一点(0.05em)会让标题更精致。大写英文标题尤其需要。
text-indent:中文段落首行缩进两个字,用 2em(em 是当前字号,2em 正好两个字宽)。
text-shadow:文字阴影,可以做出立体感、霓虹效果。语法是 x偏移 y偏移模糊半径颜色。

3. 文本溢出省略号(高频需求)

实际开发中,卡片标题、列表项经常需要"超出部分显示省略号"。单行和多行的写法不一样,但都是固定模板,直接复制即可。

.card {
  width: 200px;
  white-space: nowrap;      /* 不换行 */
  overflow: hidden;         /* 溢出隐藏 */
  text-overflow: ellipsis;  /* 溢出部分显示省略号 */
  /* 组合起来 = 单行文本溢出显示... */
}

.article {
  /* 多行文本溢出显示...(webkit 私有但支持良好) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

这两个片段背下来即可,几乎是每个项目都会用的。单行省略号是三件套:white-space: nowrap + overflow: hidden + text-overflow: ellipsis。

4. 自定义字体(@font-face)

系统字体就那几种,想做品牌感强的页面,通常要引入自定义字体。CSS 用 @font-face 声明一个字体,然后像普通字体一样用。

/* 引入一个自定义字体(字体文件放在服务器上) */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;   /* 字体加载前用回退字体,避免白屏 */
}

/* 使用 */
h1 {
  font-family: 'MyCustomFont', sans-serif;
}

/* 引入 Google Fonts(最省事) */
/* 在 HTML head 里加: */
/* <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> */

几个关键点:

格式优先 woff2:体积最小、压缩最好,现代浏览器全支持。配 woff 兜底老浏览器。
font-display: swap:字体下载完之前先用回退字体显示,避免"白屏等着字体加载"。这个一定要加,否则首屏体验很差。
用 Google Fonts 最省事:不用自己托管字体文件,直接 link 一行就好。但国内访问可能慢,生产环境建议自托管或用国内 CDN。

5. 字体选择的实战建议

正文用系统字体栈:加载快、用户熟悉。常见栈:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif。
标题才用自定义字体:整个正文用自定义字体,加载慢、流量大。只在标题、Logo 这种关键位置用。
中文字体慎重自托管:中文字体文件动辄几 MB,会让首屏白屏。要么用"字体裁剪"只保留用到的字,要么用系统的微软雅黑/苹方。
少用花哨字体:可读性第一。除非是设计需求,正文永远用 sans-serif 系。

小结

文字是网页体验的核心。掌握字体栈、字号、行高、对齐这四件套,加上文本省略号和自定义字体,你就能让任何文字内容看起来专业。下一篇讲颜色与背景——让页面真正"有色彩"起来。

← 上一篇 CSS 盒模型

下一篇 CSS 颜色与背景 →

✈️💬