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

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

1. 这一章讲什么Copy Anchor Link

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

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

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

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

3. 核心原理Copy Anchor Link

① color:颜色有三个「入口」Copy Anchor Link

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:字体必须排「备用队」Copy Anchor Link

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

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

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

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

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

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

③ font-size:四个单位,先记住 px 和 remCopy Anchor Link

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:粗不粗,可以按数字买Copy Anchor Link

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

⑤ text-align:一行文字往哪站队Copy Anchor Link

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

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

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

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

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

<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;
}

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

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

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

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

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

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

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

网页字体:Google Fonts 三步引入Copy Anchor Link

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

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

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

4. 作者的判断与证据Copy Anchor Link

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

5. 边界与局限Copy Anchor Link

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

6. 可带走的Copy Anchor Link

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

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

7. 原文地图Copy Anchor Link