文本与字体：font、line-height、text-overflow

文本与字体：font、line-height、text-overflow

---

CSS 文本与字体，咱就是说，看似是最基础、最不用费脑子的知识点，却是我早期开发中，踩坑最多、最容易翻车的地方！谁懂啊家人们，最开始我天真地以为，不就是设个字体、调个字号吗，随便写两句应付一下就行，结果做出来的页面排版，乱得没法看——字体在我电脑上好好的，到同事电脑上就变样；行高调太挤，读两行就眼睛酸；文本太长直接乱换行，把整个布局都撑崩；甚至还有一次，因为font简写顺序写错，所有字体样式全失效，排查了半天都没发现问题，真的会谢！后来踩够了冤枉路才慢慢发现，排版好看的核心，其实就藏在font、line-height、text-overflow这几个常用属性里，只要记准用法、避开那些蠢坑，大部分排版场景都能轻松拿捏。今天就掏心窝子，把我实打实的实操经验、踩过的那些坑，全分享给大家，新手宝子跟着学，真的能少走很多弯路，别再跟我当初一样瞎折腾！

一、字体族 font-family：选对字体栈，跨浏览器显示才统一

font-family 这东西，看着简单，就只是设置个字体，但新手真的很容易踩“跨浏览器显示不一致”的坑，我当初就栽过好几次！说真的，我最开始写font-family，就图省事，只写一个“PingFang SC”，觉得自己mac上显示好看就行，结果发测试版的时候，Windows同事反馈说，字体巨丑，跟宋体似的，排查了一上午才知道，原来是没写对字体栈、没加兜底方案，真的太蠢了！

/* 系统字体栈：最推荐，适配不同系统，显示流畅不卡顿 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 中英混排：中文在前，英文在后，避免中文显示生硬 */
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

/* 等宽字体：代码块专用，字符对齐，看着舒服 */
code {
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
}

/* 衬线字体：文章正文专用，有笔触变化，阅读更有质感 */
.article {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

我的实操心得+踩坑碎碎念：写font-family，家人们，一定要记住一个核心原则——从左往右找，没有就用下一个，最后必须加通用族兜底，这是避免跨浏览器显示异常的关键中的关键，我当初踩的那些坑，全是因为没做好这一点，给大家好好唠唠：

• 日常全局字体，首选系统字体栈，听我的，准没错！不用额外引入字体文件，适配mac、Windows、手机等所有系统，显示流畅不卡顿，还能减少页面加载压力，我现在所有项目的body字体，清一色用这套，再也没出过跨浏览器显示的问题。
• 中英混排，顺序真的很重要！中文字体放前面（比如“PingFang SC”“Microsoft YaHei”），英文字体放后面，不然中文会强行用英文字体显示，笔画生硬得不行，巨丑！我当初就犯过这低级错误，把顺序写反了，中文显示得歪歪扭扭，还以为是字体文件坏了，瞎忙活半天。
• 代码块必须用等宽字体：普通字体的字符宽度不一样，代码排版会错乱，用等宽字体（比如“JetBrains Mono”），每个字符宽度一致，代码看着整齐，也方便阅读。
• 重点来了！兜底通用族千万别漏，千万别漏，千万别漏！重要的事情说三遍！不管你写多少种具体字体，最后一定要加通用族（serif衬线、sans-serif无衬线、monospace等宽），比如sans-serif，万一前面的字体都找不到，浏览器会用系统默认的无衬线字体兜底，不至于直接显示成最原始的“宋体”，一下子把页面质感拉到谷底。我早期就漏写过，结果部分旧浏览器显示成宋体，整个页面瞬间变low，真的欲哭无泪。

二、字号与字重：控制大小和粗细，别踩“模拟字重”的坑

字号（font-size）和字重（font-weight），是控制文本大小和粗细的核心，看似简单到不行，但新手很容易踩两个致命坑：一是字号单位用错，导致适配差，小屏太大、大屏太小；二是字重乱设，导致字体显示模糊、发虚，我当初就因为随便设字重，把文本搞得糊成一团，排查了好久才找到原因，真的太折腾。

/* 字号：常用px、rem、clamp，按需选择 */
font-size: 16px; /* 固定值，适合固定尺寸的文本 */
font-size: 1rem; /* 相对根字号，适合全局适配，我最常用 */
font-size: clamp(0.875rem, 2vw, 1.125rem); /* 流体适配，随视口变化，兼顾大小屏 */

/* 字重：100~900，常用400、500、700 */
font-weight: 400;   /* normal，正常粗细，正文首选 */
font-weight: 700;   /* bold，加粗，标题首选 */
font-weight: 300;   /* light，偏细，适合辅助文本 */
font-weight: 500;   /* medium，中等加粗，比700柔和，适合副标题 */

高频坑点（全是我踩过的冤枉路，新手别再犯） ：

• 字号单位，听我的，优先选rem或clamp，别再死磕px了！px是固定值，完全不适合响应式布局，小屏会显得太大、大屏显得太小，特别不协调；rem相对根字号，配合媒体查询改根字号，就能实现全局等比缩放，很省心；clamp更绝，不用写一堆媒体查询，就能实现“最小-自适应-最大”的流体字号，兼顾大小屏，我现在做标题字号，全用clamp，省了好多事。
• 字重别乱设，真的会糊！字重的取值范围是100~900，但常用的就400（正常）、500（中等粗）、700（加粗），其他值真的慎用！因为很多字体本身就没有100、200、800、900这些字重，浏览器会强行模拟，模拟出来的字重会模糊、发虚，特别影响阅读体验，还显廉价。我当初为了追求“更粗更醒目”，设了font-weight: 800，结果字体糊成一团，后来才知道，大部分中文字体，其实只有400和700两个字重，纯属瞎忙活。
• 正文字号建议16px起：小于16px的文本，在手机上阅读会很费劲，影响页面可访问性，我现在正文字号最低设1rem（默认根字号16px），辅助文本最低0.875rem（14px）。

三、行高 line-height：排版好看的关键，首选无单位

line-height（行高），我愿称之为“排版质感神器”，也是最容易被新手忽略的属性！说真的，行高调得好，哪怕字体再普通，排版也会好看很多；行高调得差，再好看的字体，读着也费劲——行高太挤，文本堆在一起，读两行就眼睛酸；行太高，文本间距太大，显得松散又臃肿。我早期就因为随便设个固定行高，导致不同字号的文本排版乱糟糟，后来摸透了无单位行高的好处，才彻底摆脱这个烦恼。

/* 三种写法，优先选无单位 */
line-height: 1.5;     /* 无单位，相对当前字号，最推荐，我全用这个 */
line-height: 24px;   /* 固定值，不推荐，适配差 */
line-height: 150%;    /* 百分比，相对父元素字号，不如无单位灵活 */

/* 实操参考：不同文本的行高建议 */
p { line-height: 1.6; } /* 正文：1.5~1.75之间，读着最舒服 */
h1 { line-height: 1.2; } /* 标题：1.2~1.4之间，紧凑不松散 */

核心区别+避坑提醒（新手必看，别再踩我踩过的坑） ：无单位、固定值、百分比，三种写法差别真的很大，我当初踩的坑，全是因为没分清它们的区别，给大家掰扯明白，记准这一点就够了：

• 首选无单位line-height（比如1.5），YYDS！它会继承“比例”，子元素会按自己的字号，自动计算行高，不用手动调整，特别省心。比如父元素line-height:1.5，父元素字号16px，行高就是24px；子元素字号14px，行高就是21px，适配性拉满，不会出现行高和字号不匹配的情况，我现在所有文本的行高，全用无单位，再也没乱过。
• 尽量别用固定值（比如24px），真的很坑！固定行高不会随字号变化，比如父元素行高24px，父元素字号16px刚好，但子元素字号14px，行高还是24px，文本间距太大，显得松散又臃肿；子元素字号18px，行高24px，文本堆在一起，读着费劲。我早期就这么写，排版乱得一批，还不知道问题出在哪，现在想起来都觉得蠢。
• 百分比不如无单位灵活：百分比是相对父元素的字号，比如父元素line-height:150%，父元素字号16px，行高就是24px，子元素会直接继承24px这个数值，而不是150%的比例，和固定值一样，适配性差，不如无单位省心。
• 行高参考：正文行高控制在1.51.75之间，读着最舒服，我常用1.6；标题行高控制在1.21.4之间，紧凑不松散，避免太高显得臃肿。

四、文本溢出：单行/多行截断，这两套写法最稳

文本溢出截断，绝对是日常开发的高频需求，没有之一！比如卡片标题、列表摘要，文本太长会直接撑崩布局，必须显示省略号（…），新手很容易踩“截断失效”的坑，我当初写多行截断，试了各种花里胡哨的写法，要么不生效，要么兼容性差，折腾了半天，最后总结出两套最稳的写法，能应对所有场景，新手直接抄就行。

/* 单行省略：三件套，缺一不可，最常用、最稳 */
.ellipsis {
  overflow: hidden;        /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
  white-space: nowrap;     /* 禁止换行，关键！漏写就失效 */
}

/* 多行省略：兼容写法，webkit内核通用（Chrome、Safari、手机端），最稳 */
.line-clamp-2 {
  display: -webkit-box;         /* 必须设为box */
  -webkit-line-clamp: 2;        /* 显示2行，按需修改 */
  -webkit-box-orient: vertical; /* 垂直排列，关键！漏写失效 */
  overflow: hidden;             /* 隐藏溢出内容 */
}

/* 现代写法：line-clamp（部分浏览器支持，简化版）*/
.line-clamp-3 {
  line-clamp: 3;      /* 显示3行，按需修改 */
  overflow: hidden;   /* 隐藏溢出内容 */
}

实操心得+避坑提醒：文本截断，新手真的不用记太多花里胡哨的写法，掌握这两套就够了，我当初踩的坑，全是因为漏写关键属性，给大家重点强调：

• 单行省略，三件套缺一不可，少一个都不生效，记死了！overflow: hidden、text-overflow: ellipsis、white-space: nowrap，这三个属性必须一起写，我当初经常漏写white-space: nowrap，结果文本换行显示，根本不截断，还以为是代码写错了，瞎折腾半天，真的会谢！
• 多行省略，优先用webkit兼容写法：虽然现代写法（line-clamp）更简洁，但兼容性还不够好，比如Firefox浏览器不支持，而-webkit-box这套写法，兼容所有webkit内核浏览器（Chrome、Safari、手机端），是目前最稳的多行截断方式，我项目里的多行截断，全用这套。
• 多行截断还有个隐藏坑，大家一定要注意：-webkit-box-orient: vertical 这个属性，有些编译器（比如VS Code）会自动过滤掉，导致截断失效，遇到这种情况，要么加注释保留，要么手动重新写一遍，我当初就因为这个，排查了好久才找到原因，差点心态崩了。
• 多行截断，父元素最好固定高度（可选）：虽然不用固定高度也能生效，但固定高度能避免文本显示异常，比如父元素高度不够，导致省略号显示不全，我一般会给多行截断的元素，设一个和行高匹配的最小高度。

五、文本对齐与装饰：细节拉满，提升排版质感

文本对齐（text-align）和文本装饰（text-decoration），属于排版的细节属性，看似不起眼，但用对了能大幅提升页面质感，用错了就会显得很粗糙。我早期就因为不注意字间距、首行缩进这些小细节，做出来的文章排版特别难看，显得很不专业，后来慢慢注重这些细节，排版质感直接提升一个档次。

/* 文本对齐：按需选择，避免滥用justify */
text-align: left;    /* 左对齐，正文首选，最符合阅读习惯 */
text-align: center;  /* 居中对齐，标题、按钮文本首选 */
text-align: right;   /* 右对齐，少数场景用（比如时间、金额） */
text-align: justify; /* 两端对齐，慎用！中文显示容易有大间距 */

/* 文本装饰：控制下划线、删除线等 */
text-decoration: none; /* 无装饰，链接首选，去掉默认下划线 */
text-decoration: underline; /* 下划线，强调文本用 */
text-decoration: line-through; /* 删除线，废弃文本用（比如原价） */
text-decoration: underline wavy red; /* 自定义下划线：波浪线、红色 */

/* 其他细节：首行缩进、字间距、词间距 */
text-indent: 2em;     /* 首行缩进2字符，中文文章正文常用 */
letter-spacing: 0.05em;  /* 字间距，微调文本紧凑度，提升可读性 */
word-spacing: 0.2em;     /* 词间距，英文文本常用，中文基本不用 */

实操细节+避坑提醒：这些细节属性，不用每个都用，按需选择即可，重点避开这些坑，新手记准：

• 正文首选左对齐：text-align: left，最符合中文阅读习惯，居中对齐只用于标题、按钮文本，右对齐只用在少数场景（比如时间、金额），别滥用。
• 慎用text-align: justify（两端对齐），真的很踩雷！虽然两端对齐看起来很整齐，但中文文本会因为字符长度不均，出现“大间距”，显得很生硬、很怪异，影响阅读体验。我当初把它用在文章正文，结果排版巨丑，后来再也不用了，听我的，中文正文别碰这个属性。
• 链接一定要去掉默认下划线：text-decoration: none，默认的下划线很粗，不好看，可根据需求，给hover状态加一个细一点的下划线，提升交互感。
• 中文首行缩进用text-indent: 2em：2em刚好是两个中文汉字的宽度，符合中文排版习惯，别用px，不然不同字号下，缩进宽度不一致；字间距（letter-spacing）可以微调，比如0.05em，让文本更紧凑，提升可读性，但别设太大，不然显得松散。

六、font 简写：简化代码，但别踩“顺序”的坑

font 简写属性，真的是个“双刃剑”——用对了能简化代码、提升开发效率，把font-style、font-weight、font-size、line-height、font-family 多个属性，合并成一行代码，省不少事；但用错了，尤其是顺序写错了，就会导致整个字体样式失效，我当初就因为顺序写错，排查了好久才发现问题，纯属低级错误，新手一定要记准顺序！

/* 完整简写：顺序不能乱！style weight size/line-height family */
font: italic 700 16px/1.5 "PingFang SC", sans-serif;

/* 简化简写：最少要包含 size 和 family，缺一不可 */
font: 16px sans-serif; /* 仅设置字号和字体族，其他属性默认 */
font: 1rem/1.6 "Source Serif 4", serif; /* 包含字号、行高、字体族 */

核心规则+避坑提醒（新手必记，别再犯我当初的错） ：font简写，重点就两个——“顺序”和“必填项”，记准这两点，就能避免出错，我当初踩的坑，全是因为没记准顺序：

• 简写顺序固定，不能乱，记死了：font-style → font-weight → font-size/line-height → font-family，顺序错了，整个简写就会失效，比如把size和weight顺序写反，字体样式直接不生效，我当初就犯过这个低级错误，排查了半天，才发现是顺序写错了，真的很蠢。
• line-height和font-size，用“/”连接：比如16px/1.5，前面是字号，后面是行高，不能漏写“/”，也不能写反顺序。
• 必填项：最少要包含 font-size 和 font-family，这两个属性缺一不可，否则简写失效，比如只写font: 16px，不写字体族，样式不会生效。
• 可选属性：font-style（斜体）、font-weight（字重），如果不写，会默认继承父元素的属性，比如不写font-weight，默认是400（正常）。

七、我的实际示例（直接套用，少踩坑）

结合我日常开发的高频场景，整理了3个实操写法，涵盖正文、卡片标题、摘要，全是我项目里常用的，避开了所有我踩过的坑，新手宝子直接复制套用就行，不用自己瞎琢磨、瞎踩坑，省下来的时间摸鱼不香吗？

/* 场景1：文章正文排版（最常用，阅读舒适） */
.article-body {
  font-family: "Source Serif 4", Georgia, serif; /* 衬线字体，提升阅读质感 */
  font-size: 1.125rem; /* 18px，正文合适大小 */
  line-height: 1.75; /* 无单位行高，读着舒服 */
  color: #333; /* 深灰色，比纯黑柔和，保护视力 */
  text-indent: 2em; /* 首行缩进2字符，符合中文排版 */
  letter-spacing: 0.02em; /* 微调字间距，提升紧凑度 */
}

/* 场景2：卡片标题（单行省略，避免破坏布局） */
.card-title {
  font-size: 1rem; /* 16px，卡片标题合适大小 */
  font-weight: 600; /* 中等加粗，比700柔和，不生硬 */
  /* 单行省略三件套，缺一不可 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 场景3：摘要文本（两行省略，简洁不臃肿） */
.excerpt {
  font-size: 0.875rem; /* 14px，辅助文本大小 */
  color: #666; /* 浅灰色，区分正文 */
  line-height: 1.5; /* 无单位行高，紧凑不松散 */
  /* 多行省略，webkit兼容写法，最稳 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

八、个人总结：文本与字体避坑核心（新手必看）

1. 字体族：写对字体栈，中文在前英文在后，最后加通用族兜底，别漏了，避免跨浏览器显示异常，别再跟我当初一样，让Windows同事吐槽字体丑；

2. 字号与字重：字号优先用rem、clamp，正文16px起，别用太小的字号，伤眼睛；字重常用400、500、700，别乱设其他值，避免浏览器模拟字重导致模糊；

3. 行高：首选无单位，正文1.51.75，标题1.21.4，别用固定值，适配性太差，不然排版会乱糟糟；

4. 文本溢出：单行省略三件套缺一不可，多行省略优先用webkit兼容写法，避开编译器过滤属性的坑，别再瞎折腾不生效的写法；

5. 文本细节：正文左对齐，慎用两端对齐，中文正文别踩雷；链接去掉默认下划线，显得更精致；中文首行缩进用2em，符合阅读习惯；

6. font简写：记住固定顺序，必填size和family，line-height用“/”连接，别写反顺序，避免样式失效。

其实文本与字体排版，真的没有太多复杂的知识点，核心就是“记准用法、避开坑、注重细节”。我最开始也是随便写，踩了无数坑，才慢慢总结出这些经验，新手宝子不用追求复杂，先掌握这些基础用法，把细节做好，排版就能好看又实用。配合前4篇讲的盒模型、单位、颜色渐变知识，CSS布局+美化+排版，就能彻底拿捏，轻松做出质感满满的页面，再也不用被测试和产品吐槽排版丑啦！