跳转至

字体与文字 — 从字族回退到行高

原书拆成两章(第 9 章字体、第 10 章文字),这里合并讲——它们的分工是: 字体属性定「字本身长什么样」(哪个字、多大、多粗),文字属性定「字排成什么样」 (什么颜色、怎么对齐、有没有下划线、大小写、字距)。两组都是网页信息的主载体, 也是第 03 章继承机制的最佳用例:它们几乎全继承,body 上设一次,全站生效。

1. 这一章在全书链条里的位置

盒模型(04)管盒子,display(05)管站队——盒子站定之后,里面装的字怎么呈现,就是这两章。 它们位于「布局」与「颜色背景」之间:前面管结构,这两章管阅读体验本身, 第 09(书内编号)章开头那句定位很准:字体是网页上传递信息的主要方式1。

2. 顶层全景:两条线

字本身(原书第 9 章)              字的排布(原书第 10 章)
font-family  哪个字、备胎是谁      color           什么颜色
font-size    多大,px 还是 rem     text-align      左中右齐(只对块容器)
font-weight  多粗,100–900         text-decoration 下划线、删除线
font-style   正体还是斜体         text-transform  全大写/全小写/首字母
line-height  行与行多远           letter/word-spacing 字距、词距

图说:左边挑「字」,右边摆「字」。两组几乎全部继承。

3. 核心原理:字本身(原书第 9 章)

font-family:一份按优先序回退的名单

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

这叫字体栈(font stack):浏览器先用第一个;用户的机器上没有它,就用第二个;再没有就用第三个; 名单兜底的是一个通用字族(generic family)——这里是 sans-serif(无衬线体), 意思是「操作系统默认的无衬线字体随便挑一个」2。其他通用字族:serif(衬线体)、 monospace(等宽体,代码用这个)、cursive、fantasy。

为什么要回退?因为你指定的字体只装在你自己的电脑上;访客用的可能是任何设备。 名单里带空格的字体名要加引号("Open Sans"),通用字族不加引号3。

系统字体栈是这条路的极致——直接让页面用「这台机器自己的系统字体」:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

换来原生应用的观感和零加载时间(不用下载任何字体文件)4。

font-size:rem 是默认答案

四个常用单位:px(像素,钉死)、rem(相对根元素 <html> 的字号)、 em(相对父元素字号)、%(父元素字号的百分比)。 浏览器默认根字号是 16px,所以 1rem 通常是 16px、2.5rem 是 40px5。

为什么默认推荐 rem 而不是 px:相对单位尊重用户的浏览器设置 (有人把系统字号调大看书,px 会无视他,rem 会跟着放大)——可访问性的入门要求6。

主线例子:一处改,全站变

输入:整站用 rem 写,然后只改一行。

html { font-size: 16px; }
h1  { font-size: 2.5rem; }   /* 2.5 × 16 = 40px */
p   { font-size: 1rem; }     /* 1 × 16 = 16px */

@media (max-width: 600px) {
  html { font-size: 14px; }  /* 小屏整体缩一号字 */
}

小屏生效后:h1 变成 2.5 × 14 = 35px,p 变成 14px——全站每一处字号自动等比缩放, 因为所有字号都是根字号的倍数7。这就是 rem 相对 px 的战略价值: 缩放开关只设在一个地方。媒体查询(@media)的细节在第 12 章,这里把它当「条件开关」用。

font-weight:100 到 900 的粗细轴

normal 等于 400,bold 等于 700;数字轴从 100(Thin,最细)到 900(Black,最粗)8。 一个坑:设 900 不代表就粗得起来——字体文件里得有 900 这个字重,否则浏览器只能 「伪加粗」(描粗)或退回 bold9。

line-height:行距要写成不带单位的倍数

p { font-size: 1rem; line-height: 1.6; }

含义:行高是字号的 1.6 倍——16px 的字,行与行之间 16 × 1.6 = 25.6px,呼吸感刚好10。 必须不带单位(写 1.6 不写 16px):带单位的行高是钉死的绝对值,字号以后调大, 字就会叠在行框里;倍数则永远跟着字号走11。这是书里点名的一条最佳实践。

4. 核心原理:字的排布(原书第 10 章)

color 与对齐

color 是文字颜色(第 09 章会展开四种写法);text-align 只对块级容器生效—— <span>、<a> 这类行内元素上设它没有效果,要设在它们外面的 <p> 或 <div> 上12。 四个值:left、right、center、justify。justify(两端对齐,报纸样式)在网页上要慎用: 浏览器不会自动断词,强行拉齐会挤出难看的「白河」(rivers of white space)13。

text-decoration:装饰线

简写,一行可带线型、样式、颜色:text-decoration: underline dotted red;。 最常用的一个值是 none——去掉链接默认的下划线14。

text-transform:大小写别用键盘敲

uppercase(全大写)、lowercase、capitalize(每个词首字母大写)。 要全大写就用这个属性,别在 HTML 里直接敲大写字母——屏幕阅读器会把敲出来的 全大写单词当成缩写逐字母念(把「WARNING」念成「W-A-R-N-I-N-G」),CSS 转换则没有这个问题15。 视觉层的事留在视觉层做,内容层保持原样。

letter-spacing 与 word-spacing

字距(tracking)与词距,微调用。常见搭配:全大写标题加一点字距 (letter-spacing: 0.1em),大写字母才不挤成一团16—— em 在这里是相对当前字号的长度单位,0.1em 即字号的十分之一。 书里的提醒:字距拉太紧伤长文阅读,「现代感」的代价是易读性17。

5. 作者的判断与证据

  • 「正文字号别小于 16px」——可访问性断言,无数据但与主流指南一致6。
  • 「line-height 永远用无单位倍数」——工程断言,理由(避免缩放后叠字)成立11。
  • 「justify 在网页上制造白河,避免」——经验断言,给了一点理由(浏览器不会断词)13。
  • 「大写用 CSS 转换而非硬敲」——可访问性断言,给的理由(屏幕阅读器)具体可信15。
  • 「字距要克制」——设计品味断言17。证据类型全书一致:作者经验 + 最小例子。

6. 边界与局限

  • 没讲 Web 字体本身(@font-face、字体文件格式、加载性能)——书只教「怎么引用字体」, 不教「怎么把字体放进网页」;想要自定义字体,这是必须先补的一课。
  • 没讲 font 五合一简写(它有复位副作用,新手慎用,本书干脆不收)。
  • 没讲 OpenType 特性(font-feature-settings,连字、表格数字)、text-overflow: ellipsis (超长省略号)——都是实用件。
  • 可访问性部分(对比度、16px)各一句话,不成体系。

判断(我们的,不是书里的): 这两章里「rem + 无单位行高 + CSS 大写」三件套 是全书性价比最高的三行代码——每行都解决一类长期痛点,且互相独立,学了就能用。 最大的洞是 Web 字体:正文通篇讲字体栈回退,却从不讲字体从哪来, 读者按本书做完会卡在「我想用的字体访客机器上没有」这一步。 如果错,会错在: 对内部工具、系统风格类项目,系统字体栈那行就够,Web 字体确非必需—— 本书的默认场景(快速做出体面的界面)里,这个省略可以辩护。

7. 可带走的

  1. font-family 是回退名单,永远以通用字族(serif/sans-serif/monospace)收尾2。
  2. 带空格的字体名加引号,通用字族不加3。
  3. 字号默认用 rem;根元素 16px,2.5rem = 40px5。
  4. 改 html 的字号 = 全站等比缩放——rem 的战略价值7。
  5. 行高写无单位倍数(1.6),不写 px——字大了行距自动跟11。
  6. text-align 只对块级容器生效;justify 在网页上挤出白河13。
  7. 要全大写用 text-transform,别在 HTML 里敲——屏幕阅读器会念成字母串15。

8. 原文地图

主题 原书章 原文位置
字体是信息主载体 Chapter 9: Font Properties text/10-ch01-1-chapter-overview.txt:7(搜「primary way」)
字体栈与通用字族 同上 text/10-ch01-1-chapter-overview.txt:21(搜「Font Stacks」);:35 搜「generic-family」
系统字体栈 同上 text/10-ch01-1-chapter-overview.txt:130(搜「System Font Stack」)
px/rem/em/% 同上 text/10-ch01-1-chapter-overview.txt:47(搜「font-size」)
默认根字号 16px 同上 text/10-ch01-1-chapter-overview.txt:63(搜「usually 16px」)
rem 缩放示例 同上 text/10-ch01-1-chapter-overview.txt:137(搜「Responsive Typography」)
100–900 字重轴 同上 text/10-ch01-1-chapter-overview.txt:71(搜「font-weight」)
字重不存在就伪粗 同上 text/10-ch01-1-chapter-overview.txt:156(搜「actually includes」)
无单位行高推荐 同上 text/10-ch01-1-chapter-overview.txt:115(搜「multiplier」);:126 搜「25.6px」
字体名加引号 同上 text/10-ch01-1-chapter-overview.txt:150(搜「wrapped in」)
正文别小于 16px 同上 text/10-ch01-1-chapter-overview.txt:154(搜「smaller than 16px」)
text-align 只对块容器 Chapter 10: Text Styling text/11-ch01-1-chapter-overview.txt:150(搜「inline elements」)
justify 的白河 同上 text/11-ch01-1-chapter-overview.txt:152(搜「rivers」)
去掉链接下划线 同上 text/11-ch01-1-chapter-overview.txt:67(搜「text-decoration」)
屏幕阅读器与大写 同上 text/11-ch01-1-chapter-overview.txt:156(搜「Screen readers」)
大写加字距 同上 text/11-ch01-1-chapter-overview.txt:126(搜「Subheadings」)

  1. 出处:「Chapter 9: Font Properties」(text/10-ch01-1-chapter-overview.txt:7,搜「primary way」)。原文:「Fonts are the primary way information is communicated on the web.」 ↩

  2. 出处:「Chapter 9: Font Properties」(text/10-ch01-1-chapter-overview.txt:21,搜「Font Stacks」;:45 搜「If unavailable」)。原文:「The browser will try to use 'Helvetica Neue.' If unavailable, it tries Helvetica, then Arial. If all fail, it uses the default system sans-serif font.」 ↩↩

  3. 出处:「Chapter 9: Font Properties」(text/10-ch01-1-chapter-overview.txt:150,搜「wrapped in」)。原文:「Fonts with spaces in their names (e.g., "Open Sans") must be wrapped in double or single quotes. Generic families (e.g., sans-serif) should not be quoted.」 ↩↩

  4. 出处:「Chapter 9: Font Properties」(text/10-ch01-1-chapter-overview.txt:130,搜「System Font Stack」)。原文:「Using the fonts native to the user's OS for a 'native app' feel and zero load time.」 ↩

  5. 出处:「Chapter 9: Font Properties」(text/10-ch01-1-chapter-overview.txt:63,搜「usually 16px」)。原文:「Default Value: medium (usually 16px in most browsers).」rem 相对根元素、em 相对父元素,见第 55–61 段。 ↩↩

  6. 出处:「Chapter 9: Font Properties」(text/10-ch01-1-chapter-overview.txt:154,搜「smaller than 16px」)。原文:「Avoid using font-size smaller than 16px for body text to ensure readability for all users.」 ↩↩

  7. 出处:「Chapter 9: Font Properties」(text/10-ch01-1-chapter-overview.txt:137,搜「Responsive Typography」)。原文:「By setting a base size on the html tag, all rem units throughout the site can be scaled at once.」,示例中 html { font-size: 14px; } 后注释「Now h1 becomes 28px and p becomes 14px」。 ↩↩

  8. 出处:「Chapter 9: Font Properties」(text/10-ch01-1-chapter-overview.txt:71,搜「font-weight」)。原文:「Keywords: normal (400), bold (700)… Numeric: 100 (Thin) to 900 (Black).」 ↩

  9. 出处:「Chapter 9: Font Properties」(text/10-ch01-1-chapter-overview.txt:156,搜「actually includes」)。原文:「Setting font-weight: 900 only works if the font file you loaded actually includes a 'Black' or '900' weight. Otherwise, the browser will 'fake' it or use bold.」 ↩

  10. 出处:「Chapter 9: Font Properties」(text/10-ch01-1-chapter-overview.txt:126,搜「25.6px」)。原文:「If the font size is 16px, the total height of the line will be 25.6px (16 * 1.6).」 ↩

  11. 出处:「Chapter 9: Font Properties」(text/10-ch01-1-chapter-overview.txt:152,搜「unitless」)。原文:「Always use a unitless number (like 1.5) for line-height. Using pixels can cause text to overlap if the font size is increased later.」 ↩↩↩

  12. 出处:「Chapter 10: Text Styling」(text/11-ch01-1-chapter-overview.txt:150,搜「inline elements」)。原文:「text-align does not work on inline elements like or . It must be applied to their parent container (like a <div> or <p>).」 ↩

  13. 出处:「Chapter 10: Text Styling」(text/11-ch01-1-chapter-overview.txt:152,搜「rivers」)。原文:「Avoid text-align: justify on the web. Unlike print, browsers often create ugly 'rivers' of white space between words because they cannot hyphenate words effectively by default.」 ↩↩↩

  14. 出处:「Chapter 10: Text Styling」(text/11-ch01-1-chapter-overview.txt:67,搜「text-decoration」)。原文示例:「Remove default underline from links」,a { text-decoration: none; }。 ↩

  15. 出处:「Chapter 10: Text Styling」(text/11-ch01-1-chapter-overview.txt:156,搜「Screen readers」)。原文:「Using text-transform: uppercase in CSS is better than typing in ALL CAPS in the HTML. Screen readers can sometimes misinterpret typed all-caps words as individual letters (acronyms).」 ↩↩↩

  16. 出处:「Chapter 10: Text Styling」(text/11-ch01-1-chapter-overview.txt:127,搜「little extra letter-spacing」)。原文:「When using uppercase, it is a common design practice to add a little extra letter-spacing to prevent the letters from looking too crowded.」 ↩

  17. 出处:「Chapter 10: Text Styling」(text/11-ch01-1-chapter-overview.txt:25,搜「Readability vs. Style」)。原文:「While tight letter-spacing might look 'modern,' it can significantly decrease readability for long-form content.」 ↩↩