本文基于 MDN 官方文档整理，适合前端初学者系统掌握文字样式的核心 CSS 属性。学完这篇，你就能独立控制页面里"字是什么颜色、多大、多粗、斜不斜、用什么字体"。
一、color —— 文字颜色
1.1 基本用法
color属性设置的是前景色，也就是文字本身（以及文本装饰线比如 text-decoration: underline的颜色）。
.box {
color: red;
}
它是一个可继承属性——子元素如果没有自己声明 color，就会沿用父元素的 color值。
1.2 颜色的 4 种常用表示方式
① 颜色关键字（Color Names）
直接用英文单词：
p { color: red; }
h1 { color: orange; }
span { color: rebeccapurple; }
CSS 内置了 140+ 个命名颜色（如 red、blue、green、white、black、transparent等），适合快速调试或语义简单的场景。
② rgb() —— 三原色数值
rgb()通过 R（红）G（绿）B（蓝） 三种光的浓度来混合颜色，每个通道范围是 0–255：
/* 红色 */
color: rgb(255, 0, 0);
/* 黑色 / 白色 */
color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
/* 百分比写法（100% = 255）*/
color: rgb(100%, 0%, 0%);
💡 0 表示"完全没有这种光"，255 表示"满强度"。屏幕颜色是加法混色：
rgb(255,255,255)= 白，rgb(0,0,0)= 黑。
③ 十六进制 Hex —— 最常用、最紧凑
原理跟 rgb()一模一样，只是把 0–255 写成两位十六进制数（00–FF）：
/* 语法：#RRGGBB */
color: #ff0000; /* 红色 */
color: #000000; /* 黑色 → 可简写 #000 */
color: #ffffff; /* 白色 → 可简写 #fff */
color: #25aa2b;
简写规则（只有当每组两个字符相同时才能缩写为一位）：
| 完整写法 | 简写 | 能否简写 |
|---|---|---|
#ff0000 | #f00 | ✅ |
#aabbcc | #abc | ✅ |
#112266 | #126 | ✅（分别重复：11→1, 22→2, 66→6） |
#ffaabc | ❌ 不能 | 各组不完全成对相同 |
十六进制不区分大小写：
#FF0000=#ff0000。
④ rgba() —— 带透明度
多一个 alpha 通道来控制不透明度（0 = 完全透明，1 = 完全不透明）：
color: rgba(255, 0, 0, 0.6);
color: rgba(12, 200, 150, 0.5);
/* 0.5 可简写 .5 */
color: rgba(12, 200, 150, .5);
现代 CSS 也支持空格分隔 + 斜杠语法（推荐新写法）：
color: rgb(255 0 0 / 0.6);
color: hsl(0 100% 50% / 0.6);
1.3 一个小彩蛋：currentcolor
currentcolor表示"当前元素的 color属性的实时值"，常用于让边框/阴影/背景之类跟着文字颜色走：
.btn {
color: #e63946;
border: 2px solid currentcolor; /* 自动等于 #e63946 */
}
二、font-size —— 文字大小
2.1 基本用法
.box {
font-size: 20px;
}
2.2 你需要知道的三个关键事实
| 知识点 | 说明 |
|---|---|
| 浏览器 UA 默认字号 | 绝大多数浏览器的 <body>默认是 16px |
| Chrome 最小字号限制 | Chromium 内核中文环境下有一个著名的 ~12px 下限（不是 CSS 规范，而是浏览器策略）；设置 font-size: 10px可能实际仍渲染为 12px。想突破需用 transform: scale()等手段，但一般不建议对小字这么做 |
| 推荐使用相对单位 | 为了无障碍（用户可能放大字体），生产环境更推荐 rem/ em/ 百分比，而非大量硬编码 px |
html { font-size: 16px; }
.card-title {
font-size: 1.25rem; /* = 20px（在16px基准下） */
}
em是相对于父元素字号的倍数（会复合叠加，新手容易踩坑），rem是相对于 <html>根字号（不会复合，更好预测）。
三、font-weight —— 文字粗细
3.1 两种写法
/* 关键字 */
font-weight: normal; /* = 400 */
font-weight: bold; /* = 700 */
/* 数值（最常用） */
font-weight: 400; /* Normal */
font-weight: 700; /* Bold */
3.2 记住这张映射表就够了
| 数值 | 常见称呼 | 说明 |
|---|---|---|
| 100 | Thin / Hairline | 极细（很多字体没这个字形） |
| 200 | Extra Light | 超细 |
| 300 | Light | 细体 |
| 400 | Normal / Regular | ★ 正常粗细 |
| 500 | Medium | 中等 |
| 600 | Semi Bold | 半粗 |
| 700 | Bold | ★ 加粗 |
| 800 | Extra Bold | 特粗 |
| 900 | Black / Heavy | 极粗 |
一句话记忆：
400 = normal，700 = bold，日常 90% 场景只用这两个值。
3.3 为什么有时候写了 300 却看不出区别？
因为大多数字体文件只包含 normal(400)和 bold(700)两种粗细。当你指定 font-weight: 300但字体没有 Light 字形时，浏览器会按回退算法找一个"最接近的可用粗细"来渲染（通常不会比指定值差太多，但不保证精确）。
还有两个相对关键字 lighter/ bolder，它们是相对于父元素计算的（只考虑 100 / 400 / 700 / 900 四个锚点），一般不必刻意记，遇到再查表即可。
四、font-style —— 倾斜样式
4.1 取值
font-style: normal; /* 默认值，标准直立体 */
font-style: italic; /* italic：优先用字体自带的斜体字形 */
font-style: oblique; /* 人工倾斜（或指定角度 oblique 14deg） */
4.2 最常见的实战用法
/* 把 <i>、<em> 的斜体"掰直"（重置为正常正文） */
i, em {
font-style: normal;
}
italic和oblique的区别：italic用的是字体设计好的斜体版本（笔画曲线可能不同），oblique更像"把正体字几何倾斜"。如果字体没做斜体字形，两者都会退化成浏览器人工倾斜。
五、font-family —— 指定字体族
5.1 基本语法
body {
font-family: "Microsoft YaHei", "SimSun", sans-serif;
}
规则一句话讲透：
逗号分隔的优先级列表 → 浏览器从左到右尝试 → 找到用户电脑上安装的就用 → 都找不到就落到最后的通用族
5.2 几个必须知道的规矩
| 规矩 | 说明 |
|---|---|
| 含空格/中文的字体名必须加引号 | “Microsoft YaHei”、“PingFang SC” |
| 最后一定要写一个通用族 | sans-serif/ serif/ monospace做兜底 |
| 选择是逐字（glyph）进行的 | 不是"定死第一个字体就全程用它"，某个字符在当前字体缺字形时会往后找 |
常用通用族：
| 通用族 | 语义 |
|---|---|
| serif | 衬线（宋体风格） |
| sans-serif | 无衬线（微软雅黑/黑体风格）★最常用 |
| monospace | 等宽（代码） |
5.3 中文站点常用兜底链示例
font-family:
-apple-system, BlinkMacSystemFont,
"PingFang SC", "Microsoft YaHei",
"Helvetica Neue", Arial,
sans-serif;
六、把它们合在一起（速查卡片）
.text {
color: #333; /* 深灰文字 */
font-size: 16px; /* 或 1rem */
font-weight: 400; /* normal，想加粗就 700 / bold */
font-style: normal; /* 不需要斜体 */
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
颜色写法速查
| 方式 | 例子 | 适合场景 |
|---|---|---|
| 关键字 | red/ orange | 快速调试 |
| hex | #ff6600/ #f60 | 最常用，复制设计稿值 |
| rgb | rgb(255,102,0) | 需要动态算颜色时 |
| rgba | rgba(255,102,0,.8) | 需要透明度时 |
| hsl | hsl(30 100% 50%) | 调色直觉更好（色相/饱和度/亮度） |
七、一个无障碍提醒（很重要）
文字颜色 不是随便好看就行：文本与背景的亮度对比至少要满足 WCAG 建议：
- 普通正文：对比度 ≥ 4.5 : 1
- 大号文字（≥ 24px 或 18.66px 加粗）：≥ 3 : 1
DevTools 里可以直接用 Color Picker 的对比度提示来检查，比你肉眼估靠谱得多。
读者互动：
- 如果你觉得文章有待改进，请在评论区留言，我会认真考虑每一条建议。
- 如果觉得文章有帮助，欢迎点赞鼓励。
- 想与我共同进步，欢迎关注我。
💬 感谢各位读者的支持与关注！期待与大家一起在前端开发的道路上共同进步！🎉
1555
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
