企业官网建设流程全解析

不少初学者跟我讲，以为 CSS3 字体样式就是给文字换换字体、调调大小，没什么技术含量。真到做模拟项目X 的时候，才发现仅仅是把font-family改一改，整个页面的对齐、行高、加载速度全部跟着乱，排查半天都找不到根子在哪。这篇文章就把 CSS3 字体样式从属性基础、字体栈逻辑、自定义字体加载到高频踩坑排查完整过一遍，给刚写页面没多久、又担心在字体上栽跟头的新手前端一份可以直接对照操作的地图。

1. 别急着写样式：先把基础属性吃透再动手

1.1 font-family 的常见写法其实有很多细节

很多新手第一次写字体样式，都是从font-family: "微软雅黑"这句开始的。但真正进入项目后你会发现，单纯写一个中文字体远远不够。因为font-family不是“指定”某个字体，而是给浏览器提供一份“候选名单”，它会从左到右逐个查找，找到第一个本地存在的字体就使用。我见过不少人以为中文字体写上去了就万事大吉，结果在别人电脑上打开还是默认字体，原因往往是字体名没写对、或者根本没有回退。

写font-family时有一个小规矩：中文或包含空格的字体名要用引号包起来，像"Microsoft YaHei"、"PingFang SC"；单个英文单词可以不写引号，但我个人习惯统一都写上，避免复制粘贴的时候丢三落四。另外，字体名尽量不要依赖操作系统的别名，比如黑体这种叫法在不同系统上可能对应不同字体，不同设备的渲染结果会很飘。

如果你的项目以中文字体为主，字体栈至少要留一个明确的回退兜底，否则浏览器一旦找不到首选字体，就会退回默认的宋体或系统很丑的基础字体，整体视觉直接崩掉。字体栈的具体编写逻辑，我放到第二章详细展开。

1.2 font-size 的几种单位：px、em、rem、vw 该怎么选

字体大小这块，新手常见的困惑是单位太多。px是绝对单位，写多少就是多少，不受父元素影响，最直观，适合按钮、标签这类需要严格一致的元素。但全部用 px 的问题在于，用户如果调整了浏览器默认字号，你的页面纹丝不动，可访问性不好。

rem是相对根元素字号的单位，默认浏览器根字号是 16px，所以1rem = 16px。你如果在html上把字号改成了 20px，整个页面的rem会跟着变化，这对做全局换肤、响应式缩放很方便。em则是相对父元素字号，子元素会一层层累计放大，嵌套深了之后很难估算实际大小，新手阶段建议少用。

近两年的项目里还流行vw单位做全屏响应式排版，比如标题直接font-size: 5vw。它的优点是能跟随视口宽度连续变化，但问题也明显：极小屏上字体可能小得看不清，极大屏上又大得离谱，所以实战里我会把clamp()函数和vw一起用，限制上下边界。字体大小没有万能单位，关键是根据你要控制的“层级”决定。

1.3 font-weight、font-style 与 font 简写属性的隐藏风险

font-weight常见写法是bold或数字700。但要注意，数值从100到900并不是你写多少浏览器就给你渲染多粗，普通桌面字体往往只有400（常规）和700（粗体）两档，中间的粗细是浏览器自己“假装加粗”出来的。中文系统字体尤其如此，500、600在大部分中文字体上根本没有对应字重，你写了等于没写。

font-style就是normal和italic，这个好理解。真正容易出问题的是font简写属性。font可以一口气把字号、行高、字体族都写了，但它的顺序有硬性要求，而且一用简写，没有写到的属性会全部重置为初始值，比如你之前设置好的font-weight可能会被悄悄还原成 400。新手我不太推荐一上来就用font简写，拆开写反而更可控。

还有一个小细节：font-weight的数字在普通字体上能不能生效，取决于系统字体是否带这个字重。现在不少设计稿里会写font-weight: 600，我在实际项目里看到过很多次渲染结果跟设计稿差了一大截，原因就在这里。后面避坑章节我会专门讲怎么处理这类问题。

1.4 line-height 不是“行高越大越舒服”那么简单

严格来说line-height不是字体本身的属性，但它直接影响字体样式在页面上的观感，写字体样式时基本绕不开。很多人把行高理解为“上一行文字底部到下一行文字底部的距离”，更准确的理解是每行文字占据的“行框高度”，它由文字高度加上行距组成。

行高最稳妥的写法是用无单位的数字，比如line-height: 1.6。它表示行高是当前字号本身的 1.6 倍，而且子元素会继承这个“倍数”而不是继承计算后的像素值，这样嵌套元素字号变化时行距能保持比例协调。反过来，如果你在父元素写了line-height: 30px，子元素加大字号时，行高还是 30px，字一大就会上下重叠，相当难看。这段我后面避坑章节还会展开一次，因为它的坑真的太常见了。

2. 字体栈的底层逻辑：浏览器到底是怎么挑字体的

2.1 从“字体找不到”开始理解回退机制

你可以把font-family当成一份购物清单：浏览器拿着这张清单，逐个去操作系统里比对，一旦找到一个有的字体，就立刻使用并停止查找。打个比方，你给页面配置了"PingFang SC", "Microsoft YaHei", sans-serif，在 mac 上浏览器优先看到苹方，直接用；在 Windows 上苹方不存在，就接着找雅黑；如果两个都没有，最后落入sans-serif这个通用分类，由浏览器自己决定默认无衬线字体。

所以字体栈顺序不是随便排的。越靠前的字体越是你真正想要的，越靠后的字体越要是“能兜底但不会太丑”的选项。千万别把所有字体都堆进去，字体栈太长会让排查问题变得困难，而且某些旧浏览器对过长字体栈解析可能还会有兼容问题。

新手还容易忽略一个点：字体栈里的字体名一定不要包含随机间距或空格，比如PingFang SC写成了PingFangSC，在部分系统上会因为字体名不匹配直接跳过。这类错误用肉眼很难发现，建议遇到字体不对时，先在浏览器开发者工具里查看计算样式，确认字体栈是否被完整解析。

2.2 一套可直接抄的通用字体栈

我给过不少同学推荐过一个通用字体栈，中文项目基本能直接用：

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

这套字体栈的思路是：英文优先让系统现代无衬线字体接管，中文再落到苹方或雅黑，最后用通用sans-serif兜底。-apple-system和BlinkMacSystemFont在苹果设备上会使用系统界面字体，观感干净；Segoe UI和Roboto分别覆盖 Windows 和 Android 的默认字体；再往后才是中文候选。

如果你希望整体的阅读感偏“微软雅黑”那种方正风格，也可以把中文字体前移。但要注意中英文混排的页面，英文部分优先用英文字体会让数字和字母的节奏更统一，也更能体现层次感。字体栈本身没有唯一正确答案，核心在于你理解每个位置的含义后去调整。

2.3 中英文混排时，字体选择策略往往比字体本身更重要

中文站点几乎都会遇到中英文混排。中国人的阅读习惯是中文正文基本用无衬线字体，但英文和数字用无衬线时，不同字体的x高度、数字宽度、字距差异非常大。我曾经在一个数据统计页面里遇到数字对不齐的情况，排查到最后发现是数字字体没有固定宽度，数字 1 和 0 的宽度不一样，表格列对不齐。

解决数字对不齐有一个小技巧：给数字和代码单独设置font-variant-numeric: tabular-nums，或者直接在对应区块使用等宽字体字体栈。很多前端组件库的统计数字就是这么做对齐的。对新手来说，不用依赖这个属性也行，但至少要有“数字宽度会影响排版”的意识。

中文字体里往往也包含英文字形，所以很多人偷懒只写一个中文字体，让英文也走中文字形。这样做的观感通常比较沉闷，数字和专业符号的字形设计也不够精致。更好的做法是像刚才的字体栈一样，英文和拉丁字体放前面，中文字体放后面，这样浏览器在处理英文和数字时会自动优先用更合适的英文字体。

2.4 衬线、无衬线和等宽字体：什么时候该换风格

字体按大类可以分成衬线体、无衬线体和等宽体。衬线字体比如常见的宋体风格，笔画末端有小装饰，适合长文阅读和传统风格的页面；无衬线字体简洁现代，是当前界面设计的绝对主流；等宽字体每个字符宽度一致，适合代码、表格、数据面板。

我见过不少新手把代码里的注释文字也设置成普通正文字体，一换行就乱得不行。其实只要你打算展示代码、日志、命令行内容，直接用monospace这类等宽字体栈会比普通字体舒服得多。一般推荐这样：

font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

这个字体栈在 mac、Windows 和 Linux 上都有良好回退。如果你想在页面上营造“科技感”或“数据感”，等宽字体也是一个低调但有效的选择，比单纯加大字号更有辨识度。

3. 用 @font-face 引入自定义字体：从文件格式到加载性能都要管

3.1 先搞懂 @font-face 的基础语法

设计稿里经常会用到公司定制字体或者第三方字体，操作系统里根本没有，这时候就要靠@font-face把字体文件挂到页面上。最基础的写法是：

@font-face { font-family: "DemoFont"; src: url("./fonts/DemoFont.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

font-family这里是给你自己的字体文件起一个逻辑名字，名字叫什么不影响文件本身，只影响你在 CSS 里引用它。src是字体文件路径，format告诉浏览器文件格式，帮助它过滤掉不支持的格式。建议至少准备woff2格式，现代浏览器对woff2的压缩率明显优于woff，文件体积能小不少。

一个容易出错的地方是一个字体家族往往有多个字重，你要在@font-face里分别声明font-weight: 400和font-weight: 700两套文件，而不是只引用一个常规字重的文件，然后幻想浏览器能自动加粗。浏览器不会无中生有，没有对应字重文件时，它会自己合成假粗体，效果往往发虚发糊。

3.2 中文字体文件普遍很大，别直接整个塞进网站

英文字体一个woff2文件几十 KB 到一两百 KB，其实还好；但中文字体动不动就几 MB 到十几 MB。把整个中文字体文件打包进前端资源，不但首屏加载速度受影响，还会吃掉不少带宽，很划不来。我见过一个后台系统因为引了一整套中文艺术字体，首屏静态资源直接多了十几 MB，白屏时间肉眼可见地拉长。

解决思路是使用子集化方案：把字体文件中项目里真正用到的字符挑出来，单独生成一个小文件。常见做法是使用字体工具对字体文件按常用字表、常用词表或者动态按需加载。如果设计稿要求页面标题用特殊字体，正文还是普通字体，那就只给标题做子集化，几十个汉字加几个标点，生成出来的文件常常只有几十 KB，效果立竿见影。

另外一个细节是unicode-range分段加载。你可以把字体文件按不同 Unicode 码段拆分，浏览器只在文本命中对应范围时才加载对应文件，这样首屏可能命中的字极少，加载压力更小。不过这个方案实现成本不低，新手阶段可以先掌握“子集化”的思路，等到实际性能瓶颈出现时再做更精细的拆分。

3.3 font-display：控制字体加载期间的显示行为

网页用自定义字体时，最影响体验的往往是加载等待期间的“空白”或“跳动”。font-display的作用就是告诉浏览器，字体文件还没加载完的时候，文字应该怎么表现。它有四个常用值：block、swap、fallback、optional。

swap是最常见的，字体没加载好就先显示回退字体，字体加载完成后立即替换，会出现字体跳动，但用户至少能读到内容。block会隐藏文字最多三秒，字体没到就一直白屏，体验很糟糕，不太推荐。fallback的行为是给字体一个极短的加载窗口，加载不出来就长期使用回退字体，下次访问可能才生效。optional更极端，完全看网络状况，考虑到用户体验，除非你非常确定这张字体不重要，否则慎用。

我自己的习惯是：品牌标题类字体用swap，保证视觉统一，同时配合关键字体预加载；正文不轻易使用自定义字体，宁可让操作系统字体顶上。这个取舍能让用户在弱网环境下更快看到内容，比追求每个字都必须用设计字体实在得多。

3.4 字体版权不是小事：别等被找上门才后悔

这块虽然和 CSS 写法无关，但会直接决定你的项目能不能上线。做内部系统或者个人项目时，用一下系统自带字体基本没问题，但是第三方字体、尤其是商用字体，一定要看清楚授权范围。许多字体只允许个人试用，用于商业网站或者提供给客户的项目时需要单独购买授权，有的还有域名、曝光量限制。

我见过不止一个同学，从某个资源站下载了“免费字体”，结果项目上线后收到了字体版权方的通知，只能加班把所有相关字体全局替换掉，改样式改到凌晨。起项目前查一下字体授权情况，比上线后再补救省事得多。建议团队里建立一份字体授权清单，标明哪些字体可以用在哪些场景，避免反复踩同一类坑。

4. 新手最容易踩的字体坑：我一条一条给你拆

4.1 line-height 继承与 em 单位：越嵌套越难算

行高的坑在前面提到过一句，这里展开细说。如果你在父元素写line-height: 30px，子元素会继承这个确定的 30px。子元素字号如果是 40px，文字高度可能超过行框，上下就会挤在一起。这个现象在列表卡片和导航菜单里特别常见，仔细看文字贴边或者互相叠字时，多半是继承了一个像素单位行高。

正确写法是写无单位数字，比如line-height: 1.5。它继承的是比例关系，不管子元素字号变大变小，行高自动跟着比例算。写组件时我建议大家优先用数字，尽量不要用百分比，百分比和30px一样是计算后的固定结果，继承下去同样会出问题。另外，段落和标题应当分别设置行高，比如正文 1.6、大标题 1.2，而不是全站一个行高糊弄过去。

4.2 font-weight 写 600 却没有变粗：原因在这里

不少人在做项目时发现，font-weight: 600写下去，浏览器根本纹丝不动。最常见的解释是当前字体压根没有 600 这个字重文件。系统里的普通中文字体一般只带了常规和粗体两个重量档位，你用400之外的数字，浏览器找不到对应字重文件时，会根据算法在现有字重的基础上伪造一个粗细，效果不一定明显。

如果你真的需要多个字重，比较可靠的做法是在@font-face里单独声明不同字重的字体文件，或者使用可变字体。可变字体把粗细做成一个连续轴，font-weight的任意数值都能对应上真实字重，但这个对字体文件本身的格式有要求，普通设计字体不一定支持。新手遇到字重不生效，先不要急着怀疑代码写错，先用开发者工具检查一下当前元素实际使用到的字体文件是哪一份。

4.3 移动端字号过小或过大：text-size-adjust 的兼容细节

移动端浏览器经常会在某些情况下自动调整文字的大小，尤其是当页面设置了过小的字号，或者横向滚动内容比例不太对的时候。iOS 上还有一个容易被忽略的点：用户从系统设置里调整过字体大小后，网页部分的字号会被浏览器放大，导致原本设计好的布局被撑破。text-size-adjust属性可以在一定程度上控制这个问题，所以很多项目会加上：

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

这样写不等于完全禁止用户调整，但能降低浏览器对网页字号的过度干预。注意text-size-adjust在某些浏览器里默认值就已经是允许自适应的，你不写可能也没问题；但真出现移动端字号和预期不符时，这类属性值得查一查。

4.4 自定义字体的“闪烁”和“隐形”：FOUT、FOIT 与实战取舍

自定义字体加载有一个经典的二选一：选择“先显示普通字体，字体加载完再换”，还是“先隐藏文字，字体加载完再显示”。前者叫 FOUT，文字会有一次跳动；后者叫 FOIT，字还没加载时文字完全看不见，时间一长就是白屏。

很多新手为了不让文字跳动，特意选择 FOIT，结果在弱网环境下页面一片空白，体验更糟。我现在做项目的原则是：核心内容一定优先保证可读性，宁可接受字体跳动，也不能让用户盯着空白页面等。配合font-display: swap和字体子集化，大部分场景都能得到不错的效果。字体跳动本身也在优化范围内，你可以把字体文件放到 CDN 并给响应头设置合适缓存，让后续访问不再跳。

4.5 letter-spacing、text-rendering 这些细节最容易被忽略

字间距letter-spacing看起来只是“让字更透气”，但它在标题和按钮上影响很大。扁平化 UI 流行之后，很多设计稿会让标题加一点字距，比如letter-spacing: 0.05em。使用em做单位可以让字距随字号缩放，比固定像素值更灵活。但要注意，字距加得过大时，文字容易散，小字号下也容易出现奇怪的视觉缝隙。

text-rendering控制浏览器对文字渲染的优化方向。optimizeLegibility是很多站点愿意开启的选项，它会在部分浏览器里自动启用连字和更精细的字形优化，小字号下观感会好一些，但计算开销会比默认值高。我不建议全站无脑设置，可以只对正文、标题这类文本比较集中的区域开启，按钮和图标这种短文本上意义不大。

另外，如果你在页面上用特殊字符做装饰，比如箭头、星号、特殊符号，不要忽略它们在不同字体下的显示差异。有的字符在 Windows 上会掉落到兜底字体，尺寸和风格跟旁边文字完全不是一个体系，排查起来就是要逐个看元素计算样式的字体来源，很费时间。

5. 把字体样式整理成设计体系：响应式、变量与验证

5.1 用 CSS 变量统管字体族与字重，告别到处改

我刚开始做项目时，字体样式散落在各个 CSS 文件里，全局搜一下能搜出十几种字体栈。后来我把字体方案抽成 CSS 变量，整个项目清爽了很多：

:root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; --font-serif: Georgia, "Times New Roman", "SimSun", serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; }

这么做的好处是，当项目需要整体切换字体风格，只需要改:root里的变量定义，而不必跑到几十个文件里去替换。配合设计稿里的字体规范，可以给标题、正文、辅助文字分别定义语义化变量，比如--text-title、--text-body、--text-caption。新人照着变量名写样式，也不太容易出现字体混乱。

5.2 响应式字号：从逐个断点写到 clamp() 的进化

以前做响应式字体，常规做法是在几个媒体查询断点里分别写字号。维护成本高，而且断点之间字号变化是突变的，视觉上不够平滑。CSS3 的clamp()函数可以给字号设置一个动态范围，形式是clamp(最小值, 首选值, 最大值)。比如：

h1 { font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem); }

这个写法表示标题字号最小 1.5rem，最大 3rem，中间随着视口宽度连续变化。浏览器窗口拉大缩小时，字号跟着平滑调整，省掉一堆媒体查询。要注意首选值部分别写得太夸张，不然在窄屏设备上最小字号也会被限制得很高。

响应式字号不是每个元素都需要调。我自己习惯只在h1、h2这类大标题上使用clamp()，正文和辅助文字保持固定大小，这样既能控制版面的冲击力，又不会让长文阅读体验差异太大。字号层级建议形成一个等比尺度的阶梯，比如相邻层级相差 0.25rem 到 0.5rem，层级含糊会让整个页面的文字关系很乱。

5.3 字体检测与回归验证：怎么知道字体真的加载成功

字体加载不是写完@font-face就万事大吉。我习惯在开发调试阶段用浏览器的开发者工具检查网络面板，确认字体文件有没有被请求、是否命中缓存、返回状态是否正常。如果发现自定义字体一直没生效，优先检查路径、文件格式和字体名引用是否一致。

前端也可以利用document.fonts相关 API 在代码里检测字体加载状态。比如想等某个字体加载完成后再执行一个依赖字体的渲染逻辑，可以通过document.fonts.load("16px DemoFont")配合事件来处理。这个用法在图表库或 Canvas 绘制文字时特别重要，因为 Canvas 在字体没有加载完成时画出来的文字往往用的是兜底字体，等你以为画完了，字体才姗姗来迟，导致绘制结果错乱。

对新项目，我建议在视觉走查阶段把各项字体状态检查一遍：标题字重、数字对齐、中英文混排、不同断点下字号变化。专门留一小段时间做字体回归，能比上线后收到一堆问题反馈省心得多。

5.4 真机或跨设备实测：系统字体差异你绕不开

字体样式始终依赖操作系统里装了哪些字体，同一个 CSS 在不同设备上渲染出来的结果不可能完全一样。Windows 上可能优先匹配到雅黑，macOS 上用到苹方，Android 设备又可能落到系统的 Roboto。这不是你的代码写错了，而是字体资源的客观差异。

跨设备实测不用特别复杂，至少要把 Windows、macOS、主流安卓机和 iOS 设备都过一遍。重点看三类场景：中文正文的可读性、英文数字的对齐、自定义字体在弱网下的加载表现。由于某些系统字体比较特殊，比如部分 Linux 环境很可能缺少中文字体，此时要确保字体栈最末尾有合理的通用分类兜底，否则会出现方块字。

我自己的经验是，项目浏览器兼容测试可以往后放，字体测试一定要趁早做。因为字体引起的布局问题往往是全局性的，越晚发现改动成本越大。如果团队里没有齐全的真机设备，可以用在线模拟器或者让同事帮忙看一眼，但最终验证还是离不开真实设备。

写字体样式这些年，我最大的体会就是：不要把字体当成“展示用的装饰”，它本质上是排版系统的一部分。每个属性、每个字体文件、每个回退顺序都会影响最终的用户体验。新手阶段最值得养成的习惯，是每改一个字体相关属性，都主动检查它在不同平台上的渲染差异。等你经历过一次“字体加载导致整个布局错乱”的深夜排错，就会明白今天这篇文章里讲的这些坑，几乎都是真金白银换回来的。