文字与字体 — 网页九成是文字,文字九成靠这六个属性¶

这一章讲两件事: 让文字变好看的那一小撮属性,逐个讲清单位和取值; 以及两个「别人不会主动教你、但一做就露怯」的细节——备用字体和链接的悬停效果。读完你能把一段文字从「默认长相」调到「杂志导语文本」。需要的基础:会写一条规则、会用类选择器(本拆解 02 章)。

1. 这一章讲什么¶

博客、产品页、作品集——绝大多数网页的主体是文字,所以 CSS 的第一批实战技能全在文字上。这一章的属性清单很短(六个),但有两处容易读漏:为什么字体要排一串备用、 为什么链接的样式要按「鼠标在不在上面」分开写。它在全书链条的位置:第 ③ 级台阶—— 选中了元素(02 章)之后,最先能改的就是文字;改完文字,下一章才去动颜色和盒子。

2. 顶层全景:六个属性管一张「文字体检表」¶

  一段文字长什么样
      ├─ color        什么颜色
      ├─ font-family  什么字体(必须带备用队)
      ├─ font-size    多大
      ├─ font-weight  多粗
      ├─ text-align   往哪边对齐
      └─ line-height  行与行之间多宽

  图说:六个属性各管一行体检项,互不冲突,可以全堆在一个类上。

3. 核心原理¶

① color:颜色有三个「入口」¶

color 管的是字的颜色(盒子的颜色是另一族属性,下一章讲)。书里在这一节顺手列出了 CSS 表达颜色的全部四种方式¹:

颜色名:red、blue 这种,好记但不全;
HEX 码:#ff6600 这种「井号加六个字符」的编码(读法第 04 章展开);
RGB 值:rgb(0, 128, 255)——红、绿、蓝各给 0–255 一个数;
HSL 值:hsl(200, 100%, 40%)——色相、饱和度、亮度三个数(第 04 章展开)。

例子:p { color: darkslategray; },所有段落变深青灰色。

② font-family:字体必须排「备用队」¶

font-family 管用什么字体写字。这一节最重要的规矩只有一句话:永远排一个备用队。

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

这串的意思是:优先用 Arial;如果这台机器上没有 Arial,就用随便哪种无衬线字体顶上。 最后的 sans-serif 不是某个字体的名字,而是一大类字体的统称—— 浏览器保证这一类里总能找到一款可用的。书里的原话是「Always use a fallback font」——总要留一个备用²。

为什么要这样?因为字体是装在读者的机器上的,不是你说了算: 你设计时漂亮的字体,在别人的电脑、别人的手机上很可能根本没装。不留备用,轻则字体乱跳,重则整个页面排版散架。

书里还列了五大字体族,记住两类就够用³:

族名	特征	典型代表
`serif`(衬线)	笔画末端带小装饰,传统、印刷感	Times New Roman、Georgia
`sans-serif`(无衬线)	笔画干净,现代、屏幕友好	Arial、Helvetica
`monospace`(等宽)	每个字符一样宽,代码专用	Courier New
`cursive`(手写体)	模拟手写	Comic Sans MS
`fantasy`(装饰体)	花哨,书里原话:很少用	——

「衬线」这个词解释一句: 字母笔画末端的小钩小刺(比如 Times 的「T」脚底那两道); 「无衬线」就是把这些小刺去掉的写法。

③ font-size:四个单位,先记住 px 和 rem¶

font-size 管字号。书里列了四种单位⁴:

px(像素):钉死的绝对大小——16px 在任何屏幕上都是 16 个像素;
em:相对父元素的字号放大缩小,1.2em = 父元素字号的 1.2 倍;
rem:相对根元素(<html>)的字号,1.2rem = 页面根字号的 1.2 倍;
%:相对父元素,和 em 一个道理。

例子 p { font-size: 1.2rem; }:页面根字号若是 16px,这段就是 19.2px。 rem 和 em 的差别看着微妙,后果很实际:em 是「相对于上一层」,层层嵌套时会连乘放大; rem 是「相对于页面根部」,全球统一基准。 新手期可以只记一个原则—— 字号用 rem,第 06 章讲响应式时会看到它的真正好处(全书统一缩放的开关)。

④ font-weight:粗不粗,可以按数字买¶

font-weight 管粗细。三档常识值之外,书里给了数字刻度⁵: normal(正常)、bold(加粗)、以及 100(最细)到 900(最粗)的数字, 常用档是 400(=normal)和 700(=bold)。注意一个边界:字体本身得带这些档—— 一款只有「正常」和「加粗」两档的字体,你写 300 它也只能给你正常,数字只是「请求」不是命令。

⑤ text-align:一行文字往哪站队¶

text-align 管横向对齐,四档⁶:left(默认,靠左)、right(靠右)、 center(居中)、justify(两端对齐——左右两边都顶齐,报纸排版的样子)。两端对齐在长段落里好看,但可能把行内空格拉得忽大忽小(这个副作用书里没提,是我们补的)。

⑥ line-height:行距,最被低估的阅读属性¶

line-height 管行与行之间的垂直间距。例子 p { line-height: 1.6; }—— 1.6 的意思是「字号的 1.6 倍」,字号 16px 时行距约 25.6px。书里的建议很直白:长段落用它来提高可读性⁷。这是老排版工的常识:行距太挤,读完一行跳回下一行时容易串行; 1.5–1.6 是正文网页的常用区间(区间值是行业惯例,不在书里)。

主线例子:一段导语文本,六个属性全部上岗¶

本章的主线例子是书末的练习:一段「导语」式段落,六个属性全堆在一个类上:

<p class="lead">Welcome to my stylish website!</p>

.lead {
  color: #2c3e50;
  font-family: 'Georgia', serif;
  font-size: 20px;
  line-height: 1.6;
  text-align: justify;
}

浏览器渲染这段文字时,六个属性各动一刀,顺序无关、全部叠加:

属性	这一刀切在哪	读者看到的变化
`color: #2c3e50`	每个字的 ink(墨)换成深蓝灰	黑字 → 深蓝灰
`font-family: 'Georgia', serif`	字体换成 Georgia,缺则用任意衬线体	默认黑体 → 印刷感的衬线字体
`font-size: 20px`	字号钉在 20px	比正文(约 16px)大一号——导语的分量感
`line-height: 1.6`	行盒拉高到字号的 1.6 倍	若折行,行与行不挤
`text-align: justify`	每行两端对齐	段落左右两条边都是直的

(五个值全部来自原书练习。#2c3e50 这类 HEX 码的读法,第 04 章讲。) 注意缺了谁:font-weight 没写,段落保持默认 normal——不写的属性就是默认值,这是 CSS 的全局规则。

链接要按「状态」换样式:伪类登场¶

链接(<a> 元素)有一个别的元素没有的性质:它会随用户操作换状态—— 鼠标悬在上面、刚被点过、正被按着。书里用伪类(pseudo-class)处理这件事: 伪类就是写在选择器后面、用冒号接着的一种「状态条件」, 意思是「只有当元素处于这个状态时,这条规则才生效」⁸:

a {
  color: blue;
  text-decoration: none;   /* 去掉链接默认的下划线 */
}
a:hover {
  color: orange;
  text-decoration: underline;
}

三个最常用状态,书里列了表⁹:

伪类	什么时候成立
`:hover`	鼠标悬停在链接上
`:visited`	这个链接被点过之后
`:active`	链接正被按住(从按下到松开之间)

效果:平时蓝字无下划线(干净),鼠标一上去变橙并挂上下划线(「我是可点的」信号)。这是全章唯一的「交互」,也是 CSS 里「响应式」一词的最小样本——同一元素,状态变了,样子跟着换。 (第 06 章的响应式设计是同一种思想的放大版:条件从「鼠标在不在」换成「屏幕有多宽」。)

网页字体:Google Fonts 三步引入¶

系统字体总有用腻的时候。网页字体指的是不依赖用户机器安装、打开页面时浏览器临时下载的字体。书里教了用 Google Fonts(谷歌的免费字体库, 几百款任选)的最短路径¹⁰:

打开 fonts.google.com,挑一款(例子是 Roboto);
点「Get embed code」,复制它给的一行 <link>;
把这行贴进 HTML 的 <head>,然后在 CSS 里照旧用 font-family: 'Roboto', sans-serif; 引用。

浏览器多跑了一趟:读到 <link> 时先去谷歌那边把字体文件下载下来, 再用它画字。所以备用队依然要写——字体文件下载失败或太慢时,还得有 sans-serif 兜底。顺带一句:这一步让谷歌知道了「有人打开了这个页面」——隐私上是笔小账, 本书没提,我们如实标注(补充,不在书里)。

4. 作者的判断与证据¶

判断:「文字是大多数网站的心脏。」 这是本章开头的立论,也是它把文字放在颜色、布局之前教的理由¹¹。属于价值排序,不是可证伪的事实——但和「网页主体是文字」的经验一致。
判断:字体要跨设备测。 章末要点里的原话:「Always test your font choices for readability on different devices.」¹² 理由前面已展开:渲染发生在读者设备上,你的屏幕不作数。
事实性内容:六种属性的取值和单位、三大链接状态、Google Fonts 的引入步骤,均可当场验证。

5. 边界与局限¶

text-decoration 和「下划线」的关系没讲。 练习里出现了 text-decoration: none(去下划线), 但全书没有解释这个属性还能做什么(上划线、删除线)——遇到时查文档即可。
字号单位没有给选用建议。 书里把 px/em/rem/% 并列介绍,没有说「什么时候用哪个」; 我们在主线例子的注记里给了「字号用 rem」的常用惯例(标注为行业惯例)。
em 的嵌套连乘坑没提。 em 相对父元素,而父元素的 em 又相对祖父元素—— 嵌套深时字号会不受控地滚雪球。这正是 rem 流行的原因,原书只给了定义,没给场景。
中文字体的世界没提。 Google Fonts 上适合中文的字体选择、中文的默认字体栈, 与英文完全是两套问题;对中文读者,这一章的实践要配中文资料用(补充,不在书里)。

6. 可带走的¶

本章主线例子,一行写完: <p class="lead"> → 五个声明各动一刀(深蓝灰、Georgia、20px、1.6 行距、两端对齐) → 一段默认黑字变成杂志式导语;链接再配 a / a:hover 两条规则,鼠标上去变橙挂下划线。

文字外观 = 六个常用属性:color、font-family、font-size、font-weight、text-align、line-height;
font-family 必须排备用队,收尾写一族统称(serif / sans-serif)保底;
字号单位四选:px 钉死;em 相对父元素(会连乘);rem 相对页面根(推荐);% 同 em;
粗细的数字是 100–900 的「请求」,字体没有那一档就给你最接近的;
line-height: 1.6 这类无单位倍数 = 字号的倍数,长段落必开;
链接三状态 :hover / :visited / :active ——「只有当状态成立时规则才生效」就是伪类;
网页字体三步:<link> 引入 + font-family 引用,备用队照写。

7. 原文地图¶

主题	原书章	原文位置
文字是网站的心脏	Chapter 3: Styling Text and Fonts	`text/04-ch03-chapter-3-styling-text-and-fonts.txt:18`(搜「heart of most websites」)
四种颜色表达方式	同上	`text/04-ch03-chapter-3-styling-text-and-fonts.txt:40`(搜「Color names」) · `text/04-ch03-chapter-3-styling-text-and-fonts.txt:42`(搜「HEX codes」)
备用字体:总要留一个	同上	`text/04-ch03-chapter-3-styling-text-and-fonts.txt:59`(搜「fallback font」)
五大字体族	同上	`text/04-ch03-chapter-3-styling-text-and-fonts.txt:63`(搜「five basic font families」)
字号四种单位	同上	`text/04-ch03-chapter-3-styling-text-and-fonts.txt:88`(搜「Units you can use」) · `text/04-ch03-chapter-3-styling-text-and-fonts.txt:94`(搜「root」)
粗细 100–900	同上	`text/04-ch03-chapter-3-styling-text-and-fonts.txt:125`(搜「Common values」)
对齐四档	同上	`text/04-ch03-chapter-3-styling-text-and-fonts.txt:146`(搜「left (default)」)
行距与长段落可读性	同上	`text/04-ch03-chapter-3-styling-text-and-fonts.txt:166`(搜「long paragraphs」)
伪类与链接三状态	同上	`text/04-ch03-chapter-3-styling-text-and-fonts.txt:169`(搜「Pseudo-Class」) · `text/04-ch03-chapter-3-styling-text-and-fonts.txt:187`(搜「mouse is over」)
Google Fonts 三步	同上	`text/04-ch03-chapter-3-styling-text-and-fonts.txt:194`(搜「hundreds of free」) · `text/04-ch03-chapter-3-styling-text-and-fonts.txt:206`(搜「fonts.googleapis.com」)
主线例子(导语文本)	同上	`text/04-ch03-chapter-3-styling-text-and-fonts.txt:226`(搜「stylish website」)

出处:「Chapter 3: Styling Text and Fonts」第 26–46 段(text/04-ch03-chapter-3-styling-text-and-fonts.txt:40,搜「Color names」;:42,搜「HEX codes」;:46,搜「HSL」)。原文列出的四种:Color names、HEX codes、RGB values、HSL。 ↩
出处:「Chapter 3: Styling Text and Fonts」第 48–61 段(text/04-ch03-chapter-3-styling-text-and-fonts.txt:59,搜「fallback font」)。原文:「Always use a fallback font like this: font-family: 'Georgia', serif」——「Georgia」加引号是可选写法,引号只在字体名含空格时必需(补充,不在书里,来自通用知识)。 ↩
出处:「Chapter 3: Styling Text and Fonts」第 63–73 段(text/04-ch03-chapter-3-styling-text-and-fonts.txt:63,搜「five basic font families」)。原文列出 Serif(Times New Roman)、Sans-serif(Arial)、Monospace(Courier New)、Cursive(Comic Sans MS)、Fantasy(「rarely used」)。 ↩
出处:「Chapter 3: Styling Text and Fonts」第 75–96 段(text/04-ch03-chapter-3-styling-text-and-fonts.txt:88,搜「Units you can use」;:94,搜「root」)。原文四种单位:px(pixels – fixed size)、em(relative to parent size)、rem(relative to root <html> size)、%(relative to parent)。「根字号 16px 时 1.2rem = 19.2px」的换算是我们按定义推的。 ↩
出处:「Chapter 3: Styling Text and Fonts」第 110–131 段(text/04-ch03-chapter-3-styling-text-and-fonts.txt:125,搜「Common values」;:131,搜「100 (thin) to 900」)。原文:Common values —— normal、bold、Numerical: 100 (thin) to 900 (thick)。 ↩
出处:「Chapter 3: Styling Text and Fonts」第 133–150 段(text/04-ch03-chapter-3-styling-text-and-fonts.txt:146,搜「left (default)」)。原文列出 left (default)、right、justify (aligns to both sides)。 ↩
出处:「Chapter 3: Styling Text and Fonts」第 152–166 段(text/04-ch03-chapter-3-styling-text-and-fonts.txt:162,搜「line-height: 1.6」;:166,搜「long paragraphs」)。原文:「Use this to make text easier to read, especially for long paragraphs.」 ↩
出处:「Chapter 3: Styling Text and Fonts」第 168–177 段(text/04-ch03-chapter-3-styling-text-and-fonts.txt:169,搜「Pseudo-Class」;:170,搜「interaction.」)。原文:「Links are styled with pseudo-classes — these let you style based on interaction.」 ↩
出处:「Chapter 3: Styling Text and Fonts」第 185–191 段(text/04-ch03-chapter-3-styling-text-and-fonts.txt:187,搜「mouse is over」)。三行原文::hover — When mouse is over the link;:visited — After the link has been clicked;:active — When the link is clicked (mouse held down)。 ↩
出处:「Chapter 3: Styling Text and Fonts」第 193–217 段(text/04-ch03-chapter-3-styling-text-and-fonts.txt:194,搜「hundreds of free」;:206,搜「fonts.googleapis.com」)。原文:「Google Fonts offers hundreds of free, stylish fonts you can add easily.」步骤:选字体(Roboto)→ 点 Get embed code → 把 link 贴进 head → CSS 里 font-family: 'Roboto', sans-serif;。隐私小账(浏览器向谷歌服务器请求字体)不在书里,是我们补的。 ↩
出处:「Chapter 3: Styling Text and Fonts」第 17–22 段(text/04-ch03-chapter-3-styling-text-and-fonts.txt:18,搜「heart of most websites」)。原文:「Text is the heart of most websites.」 ↩
出处:「Chapter 3: Styling Text and Fonts」第 251 段(text/04-ch03-chapter-3-styling-text-and-fonts.txt:251,搜「different devices」)。原文:「Always test your font choices for readability on different devices.」 ↩