03文本与字体

文字是网页的第一主角。这一课把「字」讲透： 字体属性决定每个字长什么样（字体、字号、粗细、斜正）， 文本属性决定一群字怎么排（对齐、行高、间距、装饰）。

约 30 分钟 11 个动手实验 属性手册课

一、font-family：字体族与回退机制

font-family 指定文字使用哪套字体。写法是一串备选名单， 从左往右找：用户电脑装了第一种就用第一种，没装就试下一种， 最后用一个通用字体族（如 sans-serif）兜底。

三大字体族观感对比：把第一行的 Georgia 删掉，看回退机制依次往后找
font-family 名单末尾的「兜底」：五种通用字体族
通用字体族中文含义观感与用途
serif衬线体笔画带装饰脚（宋体、Georgia），书卷气，适合长文印刷感
sans-serif无衬线体笔画平直（雅黑、苹方、Arial），清爽易读，屏幕主流
monospace等宽体字符同宽（Consolas、Courier），代码与数字表格
cursive手写体连笔手写风，中文对应楷书类，慎用于正文
fantasy艺术体夸张装饰风，几乎只做标题彩蛋
两个坑：字体名含空格必须加引号（"Microsoft YaHei"）； 名单最后一定要留通用族兜底，否则没装你指定字体的电脑会用默认字体， 版式可能崩。

二、font-size：字号与 px / em / rem

font-size 设置字号。单位先用最直观的 px（像素）， 再认识两个「相对单位」：em 相对父级字号， rem 相对根元素（html）字号。 另外还有一个 %：用在 font-size 上与 em 等价，100% 就是父级字号。

字号阶梯 + em 与 rem 的参照物差异：把父级 .ems 的 20px 改成 30px，只有 em 那行跟着变
font-size 常用单位对照：参照物决定它跟着谁变
单位参照物效果使用场景
px固定像素写多少是多少，不随环境变化精确控制：小元件、边框配套文字
em父元素字号父级变它跟着变；层层嵌套会逐级放大或缩小组件内部按比例缩放
rem根元素 html 字号（默认 16px）全站统一基准，改 html 一处全站缩放整站字号体系的首选
%父元素字号100% = 父级字号，效果与 em 等价与 em 二选一，看团队习惯
经验法则：正文 14 ~ 16px，标题 18 ~ 32px。 做整站字号体系时优先 rem——想整体放大缩小，只改 html 的 font-size 一处即可。

三、font-weight：字重 100 ~ 900

font-weight 控制笔画粗细：normal 等于 400， bold 等于 700，完整刻度是 100、200 …… 900 共九档。

四档字重对比：同样字号，粗细不同。把 900 改成 100 看极细效果
font-weight 取值速查：关键字两枚、相对两枚、刻度九档
属性值效果使用场景
normal常规，等于 400（默认值）正文；也可用来「取消」标题标签的默认加粗
bold加粗，等于 700强调、小标题、按钮文字
lighter比父级细一档（相对计算）在加粗上下文里局部回调
bolder比父级粗一档（相对计算）在正文中局部加粗
100 ~ 300极细 ~ 较细大号标题的轻盈感、高级感排版
400 ~ 500常规 ~ 中等正文、轻度强调
600 ~ 700半粗 ~ 加粗强调、导航、小标题
800 ~ 900特粗 ~ 黑体海报、封面大标题
字重能否真正生效，取决于字体文件里有没有这一档。 很多中文字体只内置 400 / 700 两档，写 900 时浏览器只能就近取材或「伪加粗」。 另一个坑：标题本身已经很粗时，再加 font-weight: bold 不变化是正常的。

四、font-style 与 font-variant：斜体与小型大写

font-style 决定文字正斜：italic 是真斜体（字体专门设计）， oblique 是把正体硬掰斜；normal 恢复正体， 常用来「取消」<em>、<i> 的默认斜体。

斜体、倾斜、恢复正常与小型大写：注意 italic 与 oblique 的细微差别
font-style 与 font-variant 取值对照
属性属性值效果使用场景
font-stylenormal正体（默认）取消 <em>、<i>、<address> 的默认斜体
italic真斜体：使用字体专门设计的斜体字形英文强调、书名、引文
oblique把正体机械倾斜，字形本身没有斜体设计字体没有 italic 字形时的替代，观感略逊
font-variantnormal正常大小写（默认）常规文本
small-caps小写字母显示为「缩小版大写」，大写不变英文标题、术语行的仪式感（仅对英文生效）
中文没有真正的斜体字形，浏览器渲染中文 italic 时就是「硬掰」效果，观感一般—— 中文强调更推荐用加粗、颜色、字号。small-caps 只对英文字母有效。

五、color：文字颜色的三种写法

颜色值有三种主流写法：关键字（写名字）、 十六进制（#RRGGBB，最常用）、 rgb / rgba 函数（三原色数值，rgba 多一个透明度）。

四种写法渲染同一个红棕色：把 rgba 的 0.45 改成 1，透明度消失
color 四种写法对照：同一个颜色，四种表达
写法格式说明使用建议
关键字red、firebrick约 140 个命名颜色演示、临时取色
十六进制#B3472E / #F00三位缩写等于六位展开（#F00 = #FF0000）日常首选
RGBrgb(179, 71, 46)每通道 0 ~ 255，也可写百分比需要计算颜色时
RGBArgba(179, 71, 46, 0.45)第 4 位 alpha：0 全透明，1 不透明叠层、蒙版、毛玻璃
取色技巧：浏览器的开发者工具、系统取色器、设计师的标注稿都能直接复制十六进制色值； 网页配色里 #六位十六进制 出现频率最高，先练熟它。

六、text-align：水平对齐四联

text-align 决定行内内容在盒子里靠哪边： left 左对齐（默认）、center 居中、right 右对齐、 justify 两端对齐（左右两边都撑齐）。

四种对齐方式：虚线是盒子边界。注意 justify 的最后一行仍靠左
text-align 四个常用值：管的是盒子里面的内容
属性值效果使用场景
left左对齐（默认值）正文、常规排版
center水平居中标题、按钮文字、海报式居中段
right右对齐价格、日期、数值列
justify两端对齐：除最后一行外，每行左右撑齐多行正文排整齐、报刊式版面
最常见的误解：想让盒子本身居中，写 text-align: center 没用—— 它只管盒子里面的文字。块级盒子自己居中要用 margin: 0 auto（盒模型一课细讲）。

七、line-height：行高与垂直居中技巧

line-height 是一行文字所占的高度。行高太小文字挤成一团， 太大又松散。无单位倍数（如 1.8）是最推荐的写法： 行高 = 字号 × 倍数，字号变了行高自动跟着变。

三档行高对比 + 单行垂直居中按钮：把按钮的 line-height 改成别的值，文字立刻跑偏
line-height 取值差异：同样写 1.8，继承下去的结果完全不同
写法行高怎么算继承给子元素的是使用场景
normal浏览器默认，约 1.2 ~ 1.4（因字体而异）normal 本身不推荐显式依赖，行高不可控
无单位倍数，如 1.8自身字号 × 1.8倍数 1.8：子元素按自己的字号重算正文首选，伸缩自如
px，如 28px固定 28px，与字号无关固定值 28px「行高 = 盒高」的单行垂直居中技巧
em / %，如 1.8em、180%自身字号 × 1.8，算出固定值算好的固定值：子元素字号变了行高不跟容易踩坑，了解即可
为什么推荐无单位？line-height: 1.8 继承给子元素的是「倍数」； 而 1.8em / 28.8px 继承的是「算好的固定值」—— 子元素字号一变，行高就跟不上，垂直居中技巧也会失灵。

八、text-decoration 与 text-transform

text-decoration 给文字加装饰线，其实是「线型 + 样式 + 颜色」的复合属性； text-transform 改英文大小写显示（原文本不变）。

装饰线家族 + 英文大小写转换：把 wavy 改成 dashed，波浪线变虚线
text-decoration 常用值：线型、线样式、颜色三段可组合
属性值效果典型场景
underline下划线强调、链接默认样式
overline上划线少用，特殊装饰
line-through删除线原价、过期信息
none无装饰导航链接去下划线：a { text-decoration: none; }
underline wavy 颜色线型 + 样式 + 颜色拼写检查般的提示效果
text-transform 常用值：只改显示，不改原文本
属性值效果使用场景
none不转换（默认）常规文本
uppercase全部大写英文标题、角标、按钮
lowercase全部小写统一用户输入的显示风格
capitalize每个单词首字母大写英文标题式（Title Case）
黄金组合：导航链接先 a { text-decoration: none; } 去掉默认下划线， 再用 color 或 :hover 变色提示「这是链接」—— 这是几乎所有网站的起手式。

九、letter-spacing、word-spacing 与 text-indent

三个「间距」属性各管一段：letter-spacing 管字符之间， word-spacing 管英文单词之间（对中文无效）， text-indent 管段落第一行缩进。

字距 / 词距 / 首行缩进三件套：把 2em 改成 4em，缩进立刻翻倍
三个间距属性取值对照：各管一段，互不越界
属性属性值效果使用场景
letter-spacingnormal默认字距（0）正文
正值，如 4px字符间撑开标题提气质（1 ~ 6px）、海报大字
负值，如 -1px字符收紧，过负会粘连大号标题的紧凑感，慎用
word-spacingnormal默认词距常规文本
长度，如 10px加大单词间的空隙只对空格分隔的英文单词生效，中文无效
text-indentpx，如 32px固定缩进字号固定时用
em，如 2em按当前字号换算，2em = 两个字宽中文段落首行缩进首选
%，如 10%相对容器宽度少用，宽度变化时缩进不稳
中文排版小技巧：标题加 letter-spacing 提升气质（1 ~ 6px）； 正文别乱加字距，会破坏阅读节奏；word-spacing 只对空格生效， 中文之间没有空格，所以它管不着中文。

十、text-shadow：文字阴影

text-shadow 给文字加影子，让标题「立」起来。 写法是水平偏移、垂直偏移两个值必填，模糊半径和颜色可选； 还能用逗号叠加多层阴影，做出描边、发光等效果。

三种经典阴影配方：把发光的模糊半径 12px 改成 2px，光晕立刻收敛
text-shadow 参数拆解：前两个必填，后两个可选
参数是否必填效果说明
水平偏移必填影子左右挪：正右负左如 2px、-2px
垂直偏移必填影子上下挪：正下负上如 3px
模糊半径可选，默认 0越大越虚，0 是锋利实影不能为负值
颜色可选，默认跟随文字色影子的颜色常用 rgba 调浓淡
常用配方速查：背下三行，标题质感立刻提升
效果写法关键点
柔和投影text-shadow: 2px 3px 6px rgba(0,0,0,.25)小偏移 + 中模糊
浮雕text-shadow: 0 1px 0 rgba(255,255,255,.9)1px 无模糊，深色底配亮影
发光text-shadow: 0 0 12px 颜色偏移归 0，多层叠加更亮
阴影是「少一点更好看」的属性：偏移小、模糊适中、颜色半透明基本不会出错； 又黑又实的影子会让页面显得廉价。

十一、font 简写：一行写完字体六件套

font 是复合简写属性，一行能同时写下 font-style、font-variant、font-weight、 font-size、line-height、font-family。 规则很严：font-size 和 font-family 必填且必须排在最后， 行高跟在字号后面用斜杠 / 分隔，其余三项可省略、顺序随意。

一行 font 简写 = 五行单独声明：试着删掉 italic，斜体消失但规则照常生效
font 简写组成：位置严格，省略有代价
组成项是否必填说明
font-style可省与 variant、weight 一起可任意顺序
font-variant可省同上
font-weight可省同上
font-size必填后面可用 /line-height 顺带写行高
line-height可省不写则被重置为 normal
font-family必填，且收尾备选名单照旧，逗号分隔
简写会「没收」没写的属性：font: 16px sans-serif 会把 line-height 重置成 normal， 把你之前单独写的行高冲掉。所以要么简写写全，要么把单独声明放在简写之后。

十二、本章小结

用一张表分清两类属性——「字长什么样」与「字怎么排」：

文本与字体属性总览：字体管字形，文本管排版
分类属性一句话职责
字体属性
（字形本身）		font-family用哪套字体，多备选 + 通用族兜底
font-size字号：px / em（相对父级）/ rem（相对根）
font-weight粗细 100 ~ 900，normal=400、bold=700
font-style正斜体：italic / oblique / normal
font-variantsmall-caps 小型大写（英文）
文本属性
（排版布局）		color文字颜色：关键字 / #十六进制 / rgb(a)
text-align水平对齐：left / center / right / justify
line-height行高，推荐无单位倍数；=盒子高度时单行垂直居中
text-decoration装饰线：underline / line-through / none / wavy
text-transform英文大小写：uppercase / lowercase / capitalize
letter-spacing字符间距，标题提气质
word-spacing英文单词间距，对中文无效
text-indent首行缩进，中文段落用 2em
text-shadow文字阴影：偏移必填，模糊与颜色可选，可叠多层
  • 字体名单从左到右回退，含空格要引号，结尾留通用族
  • 行高用无单位倍数，继承时倍数随行，不会失灵
  • text-align 管盒子里面的文字，管不了盒子自己
  • 导航链接三件套：text-decoration: none + 自定义颜色 + hover 变色
  • 颜色首选十六进制，需要透明度用 rgba
  • 文字阴影偏移小、模糊适中、半透明最稳妥；font 简写会重置没写的项，用时要写全
动手练习：做一张「商品促销卡」——标题 24px 加粗土金色并加 4px 字距； 原价用删除线灰色小字，现价大号红棕色；商品描述两行正文（行高 1.8、首行缩进 2em）； 底部一个居中的胶囊按钮（行高技巧实现文字垂直居中）。全部要求在编辑器里改值验证。