字体样式这几行 CSS看起来平平无奇真到做项目的时候能把人折磨疯。font-family、font-size、font-weight、font-style这四个属性几乎每个页面都会用到可它们背后的渲染机制、字体回退逻辑、单位换算陷阱最容易被人忽略。这篇内容我不会照着手册讲而是从实际项目踩坑出发把字体样式从“能显示”到“显示得对”之间的坑挨个说清楚。适合刚接触 CSS 的初学者、写业务代码但没认真研究过字体的前端开发者以及想把自己的组件库、后台系统字体配置做得更专业的人。1. 为什么字体样式是每个页面都要做的“必修课”1.1 从一次“字体翻车”说起有次我接手一个二次开发的旧系统页面打开后标题、正文、按钮全部顶着浏览器默认字体。在 Windows 上是宋体加 Arial在 macOS 上是苹方在 Linux 上直接变成文泉驿或者其他字体。截图给客户对样式同一个页面在不同人电脑上效果完全不一样客户一口咬定“开发没还原设计稿”。后来我查了代码发现全局样式中根本没有给body设置font-family也没有对标题字号做重置所有文字都依赖浏览器默认样式。这大概是很多老项目的通病打开一个空页面浏览器会用自己的默认字体渲染Windows 默认是等线或者宋体macOS 默认苹方Android 默认思源黑体或 Roboto。不同系统、不同浏览器默认字体长得就差一大截更不用说字号、行高这些细节了。所以字体样式的第一课不是“怎么把字变好看”而是“怎么让页面在所有环境下保持一致、可控、可读”。字体没设好后面做的间距、颜色、对齐全部都是建立在流沙上的房子。1.2 字体样式决定的不只是好看很多人觉得字体样式就是个视觉问题选个好看的字体就完事了。实际上字体样式同时影响用户体验、性能、甚至是无障碍访问。从阅读体验来说正文字号太小、字重太细、行高太紧读者看两段眼睛就累了标题字号和正文拉不开层次页面信息就没有重点。从性能角度说如果使用自托管的 Web 字体加载的字重越多、文件越大首屏等待时间越长一旦字体加载慢还会出现文字闪烁或不可见的白屏期。从无障碍角度说如果用户系统设置了“更大字号”的偏好而页面用固定px写死字体大小用户调整系统设置后页面纹丝不动这也是典型的可访问性问题。字体样式并不是单纯的“设计感”问题它是一整套需要从全局考虑的技术方案。这篇文章后面讲的字体栈、单位选择、字重映射最终目标都是为了让文本在任何设备上都能稳定、舒服地展示出来。2. 字体类型font-family 与字体栈机制2.1 字体栈的工作顺序font-family的核心机制其实特别朴素浏览器拿到一个字体列表从第一个开始找当前系统里没有就找下一个直到找到一个能用的然后用它渲染。这就是“字体栈”font stack的工作方式。所以你在 CSS 里写font-family: Arial, Helvetica Neue, sans-serif;意思是优先用 Arial如果系统没有 Arial比如某些 Linux 发行版默认不带就找 Helvetica Neue再没有就去系统里挑一个默认的 sans-serif 字体。这里有个细节很多人会忽略字体名里带空格时要用引号包起来比如Helvetica Neue、Microsoft YaHei。不带空格的字体名比如Arial、Tahoma写不写引号都行。字体栈末尾最好加一个通用字体族serif、sans-serif、monospace、cursive这是兜底方案保证任何系统上都有字体可用只是显示效果可能一般。另一个容易踩坑的点系统上某个字体存在但不代表这个字体支持你页面里的所有字符。比如 Arial 并没有中文字形Windows 上如果写font-family: Arial, sans-serif;中文部分会直接跳过 Arial由sans-serif对应的系统默认中文字体接管。这种情况下字体的选择顺序要综合考虑“西文字体优先、中文字体兜底”的策略下面的实战代码会说明白。2.2 一套适合中英文混排的字体栈项目里我最常用的一套字体栈是这样的body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, PingFang SC, Microsoft YaHei, Noto Sans CJK SC, sans-serif; }逐个解释一下-apple-systemmacOS 和 iOS 上的苹方字体只对 Safari 生效放在前面是因为它在苹果设备上渲染极其舒服。system-ui一个标准化的通用字体族告诉浏览器使用当前操作系统的默认 UI 字体Windows 上可能就是 Segoe UImacOS 上是苹方Android 上是 Roboto。Segoe UIWindows 的默认界面字体如果浏览器不支持system-uiWindows 上就会落到这一项。RobotoAndroid 的默认字体。Helvetica Neue、Arial老牌西文字体兼容性极好。PingFang SCmacOS 上的中文苹方字体。Microsoft YaHeiWindows 上的微软雅黑。Noto Sans CJK SCLinux 和部分 Android 设备上的思源黑体。sans-serif最后兜底。这套栈的核心思路是西文优先用系统原生字体中文依次回退到对应平台的默认中文字体。注意中文字体写在后面因为一旦前面的西文字体不支持中文浏览器会自动往下找到第一个支持中文的字体而如果先把中文写在前面英文数字也会被中文字体的西文部分渲染有些中文字体的拉丁字母比较丑。还有一个细节-apple-system和system-ui的位置不能乱。曾经有段时间我写成了system-ui, -apple-system, ...结果在 macOS 的 Chrome 上系统会优先用 system-ui 关键字效果一样但在旧版 iOS Safari 上可能无效。稳妥的做法就是上面的顺序先system-ui再-apple-system兼容性最广。2.3 通用字体族到底怎么选serif、sans-serif、monospace这三个通用字体族很多人只是照着抄不知道具体有什么影响。简单说serif衬线字体笔画末端有装饰中文环境下通常是宋体标题时可以营造古典感但正文大段使用容易显旧。sans-serif无衬线字体笔画末端干净利落现代 UI 的主流选择。monospace等宽字体所有字符宽度一致适合代码、时间戳、订单号这类需要对齐的场景。cursive手写体中文环境下基本没有好的通用实现慎用。system-ui不是传统意义的一类“风格”而是指示浏览器用系统 UI 字体这里字体风格由系统决定。还有font-family: serif;这种写法中文回退到宋体这是很多老系统默认行为但现代 UI 设计里很少主动使用。如果项目需要卡片标题有点文艺感推荐的做法是用真正的衬线 Web 字体控制效果而不是依赖系统宋体。2.4 font-face 自定义字体怎么接进字体栈自托管 Web 字体通过font-face注册然后直接在font-family里用你起的别名font-face { font-family: Inter; src: url(inter-var.woff2) format(woff2); font-weight: 100 900; font-display: swap; } body { font-family: Inter, system-ui, sans-serif; }这里有两个需要注意的点。第一font-family里的别名随便起但最好和实际字体名区分避免混淆第二同一个字体家族如果需要多个字重最好分别用不同的font-weight注册多次font-face否则浏览器会拿单一文件强行拉伸产生“假粗”效果。关于字重的映射问题第 4 节会详细展开。3. 字体大小font-size 的单位选择与适配方案3.1 默认值与 px 的局限浏览器默认字号是 16px标题元素h1到h6有默认的字体大小比如h1显示为 2em32pxh2为 1.5em24px。很多人写代码时不重置标题字号就会出现“为什么我写了个 h1 字体这么大”的困惑。直接用px设置字体大小是最简单、最稳妥的方式设计稿标注是多少就写多少不会因为继承产生意外。但px单位的缺点是用户如果在浏览器设置里把默认字号改大或者在系统里开启了字体缩放页面上所有用px控制的文字大小都不会跟着变。这不止是用户体验问题在无障碍审计里会直接被扣分。另一个更实际的痛点整站换主题或做深色模式时如果字号全部是px写死的想整体放大缩小正文和标题只能一个个找着改。与其把所有字号写死不如用一种可以由根节点统一控制的方式。3.2 rem全局缩放的正解rem是相对根元素html计算的单位。1rem 默认等于浏览器默认字号也就是 16px。如果把html的字号改成 20px那么页面所有用rem的地方跟着放大这就是整站缩放的原理。我见过一种做法是把html { font-size: 62.5%; }这样 1rem 等于 10px换算非常方便1.2rem 12px。这个技巧早年很流行但现在的项目我基本不推荐因为它等于把默认字号从 16px 硬生生改成 10px如果用户字号偏好设成 20px根元素就变成 12.5px记起来非常别扭。更稳妥的做法是html { font-size: 100%; }根元素保持默认然后用rem写正文和标题字号需要换算时可以直接按 16px 基准心算或者用编辑器插件辅助。移动端适配如果需要按设计稿缩放可以配合 JS 动态修改html的font-size但现代布局里这种情况越来越少了更多是用下面的clamp()做流体排版。3.3 em 的继承与组件场景em相对当前元素的字体大小计算被很多人当成“自适应神器”实际上它的坑最多。如果一个元素设置了font-size: 0.5em它的父元素字号是 16px那这个元素就是 8px但如果父元素字号也是em指定的就会一层层叠加上去最后算出来的结果经常让你摸不着头脑。em真正合适的使用场景是组件内部按钮、标签、卡片里既有文字又有内边距和图标用em做单位能让整个组件随font-size一起缩放。比如按钮.btn { font-size: 0.875rem; padding: 0.6em 1.2em; border-radius: 0.3em; }改动按钮的font-size内边距和圆角会跟着同比缩放不用重新适配。这就是em的正确用法而不是拿它来写整站正文的字号。3.4 视口单位与流体排版想实现“窗口越大、标题越大”的效果可以用vw。1vw等于视口宽度的 1%如果设计稿规定 1440px 宽度下标题是 48px那么可以算出 48 / 1440 3.333vw。但直接用vw有个问题在手机和超宽屏上字体大小会走极端小屏太小、大屏太大。所以现在的流体排版更推荐clamp()函数它设置一个最小值、一个首选值、一个最大值h1 { font-size: clamp(2rem, 1.2rem 2.5vw, 3.5rem); }这段代码意思是标题最小2rem32px最大3.5rem56px中间随视口宽度在1.2rem 2.5vw这条直线上渐变。小屏不会小到看不清大屏不会大到失控。我自己实测下来这种写法非常适合文章页的封面标题、博客的主标题这类需要“跟视口呼吸”的场景而正文部分还是老老实实用rem不要跟着视口变来变去否则阅读体验会非常不稳定。4. 字体粗细font-weight 的真实映射4.1 100-900 的映射逻辑font-weight接受 100 到 900 九个档位以及normal400和bold700。理想情况下字体的设计有多少个档位浏览器就渲染多少个档位。但现实是大多数普通字体文件只包含两到三种字重。比如 Windows 的微软雅黑包含 Regular、Light、Bold 三种字重。你给它设置font-weight: 500;系统找不到对应字重文件浏览器就会做两件事先从已有字重里挑一个接近的档位实在没有可能还会用算法合成一个“假粗”。在 Chrome 里如果字体只有 400 和 700设置 500 通常会显示为 400设置 300 也会显示为 400设置 600 反而可能显示为 700。所以在做设计时不要期望每个字重档位都会生效。实际项目里我一般只约定三档400用于正文、500用于强调文本或次级标题、700用于大标题和按钮文字。其他档位不主动用除非确认字体文件本身支持。4.2 中文字体与系统字体的字重缺档中文系统字体在字重上的缺失尤其明显。macOS 的苹方实际有六档字重但旧版浏览器对它的识别有限Windows 的微软雅黑只有三档更早的宋体基本只有一档。中文字体文件动辄几兆几乎不会有字体加载十几个字重档位的完整版本所以网页上的中文标题经常出现“看起来差不多粗”的情况。还有一个常见的“假粗”问题在低质量字体上设置font-weight: 700;时浏览器可能不是调用真正的粗体文件而是把 400 的笔画强制拉伸加粗。用这种方式渲染的文字在笔画边缘会有明显的失真尤其是小字号下更明显。要控制这种合成行为可以用text-rendering: optimizeLegibility; font-synthesis: none;font-synthesis: none的意思是如果某个字重档位没有对应的真实字体文件不要用算法合成宁可不加粗。这个属性对英文字体效果明显中文场景下建议根据项目自行取舍因为font-synthesis: none可能导致某些特殊字重显示为普通字重。4.3 可变字体一个文件撑起所有字重传统字体每个字重一个文件一副字体家族可能要加载七八个文件。可变字体Variable Fonts把整个字重轴、宽度轴、斜度轴压缩进一个文件用一个轴值控制所有档位。CSS 里这样写.element { font-family: Inter Variable, sans-serif; font-weight: 620; /* 任意值 */ }更精细的控制可以配合font-variation-settings不过大部分场景直接写font-weight就行因为现在的可变字体规格已经能接受任意数值。使用可变字体最大的收益是性能一个文件替代多个文件同时页面里不同元素可以精确到任意字重档位。不过要注意可变字体的兼容性虽然已经很好了但中文可变字体还不多见而且体积不小项目中使用前一定要做子集化处理后面第 6 节会讲。5. 字体样式与更多细节font-style、font-variant 和 font 简写5.1 italic 与 oblique 的差别font-style有三个值normal、italic、oblique。italic是字体自带的斜体形态字体设计师专门画过一套倾斜的字形oblique则是在原字形基础上直接做倾斜变形没有重新设计字形。对西文字体来说很多字体只内置了italic没有oblique浏览器会用变形代替而对中文字体来说基本没有斜体文件所以给中文设置font-style: italic的时候浏览器只能用变形方式强行倾斜。实际项目里中文字体要表达强调时我很少用italic中文的斜体观感很差通常用加粗、颜色、引号来区分。英文的italic则用于文章里的书刊名、外文术语这是排版习惯。oblique还有一个参数可以控制倾斜角度比如oblique 10deg但这个属性在现代浏览器中支持度一般使用时要先确认目标环境。5.2 数字和表格类文本的 font-variant-numeric这个属性经常被忽略但对数据展示类页面非常有用。默认情况下普通字体里的数字是比例数字字符宽度不同数字 1 和数字 8 的宽度不一致在表格、订单列表里会导致数字无法对齐。font-variant-numeric: tabular-nums;可以切换到表格数字让所有数字宽度一致。阿里云控制台、各类管理后台的表格数据都会用到这个特性.price, .order-no, .metrics-number { font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; }用上之后一列订单号会整整齐齐排成一条直线视觉上舒服很多。另外一个相关的属性是font-variant-ligatures控制字母的连字效果比如fi、ffl这类字符组合是否合并显示。大部分 UI 的正文排版建议保持默认不需要手动干预。5.3 font 简写属性的顺序陷阱font是一个可以把多个字体属性压缩成一行的简写属性顺序是font-style font-variant font-weight font-size/line-height font-family。其中后两项是必填的而且顺序不能颠倒.declaration { font: italic 600 1rem/1.5 Inter, system-ui, sans-serif; }上面的写法等价于.declaration { font-style: italic; font-weight: 600; font-size: 1rem; line-height: 1.5; font-family: Inter, system-ui, sans-serif; }但有个坑如果省略了font-family或font-size这一行font简写会被浏览器视为无效整个规则直接不生效。而且font简写会把line-height带进来如果后面想单独改行高得再写line-height容易写重。我自己的习惯是全局样式用font简写方便阅读但组件内部为了避免意外覆盖还是拆开写单属性调试起来更清楚。6. 实操搭建一套字体样式系统6.1 全局字体变量与基础重置这一节直接给一套可以抄走的配置。先把整个字体栈封装成 CSS 变量方便后续统一调整:root { --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, PingFang SC, Microsoft YaHei, Noto Sans CJK SC, sans-serif; --font-serif: Georgia, Times New Roman, Songti SC, SimSun, serif; --font-mono: SF Mono, Cascadia Code, Menlo, Consolas, Liberation Mono, monospace; --font-body: var(--font-sans); }然后对全局基础样式做一个重置关键在于把标题的默认字号、字重还原避免不同浏览器差异html { font-size: 100%; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.7; color: #222; } h1, h2, h3, h4, h5, h6 { font-size: revert; font-weight: revert; line-height: 1.2; text-wrap: balance; } p, ul, ol, dl { line-height: 1.7; }text-size-adjust: 100%的作用是防止移动端横屏时浏览器自动放大字体。text-wrap: balance这个属性可以让标题在换行时尽量保持两侧平衡对长标题的视觉效果提升明显Chrome 和 Safari 已经支持。6.2 标题、正文、数字场景的字体应用接着按设计稿给不同层级的文本定义字号。我的习惯是标题使用流体clamp()正文固定remh1 { font-size: clamp(1.8rem, 1.2rem 2.5vw, 2.8rem); font-weight: 700; } h2 { font-size: clamp(1.4rem, 1rem 1.5vw, 2rem); font-weight: 600; } h3 { font-size: 1.25rem; font-weight: 600; } .body-large { font-size: 1.125rem; } .body-caption { font-size: 0.875rem; color: #666; } .btn { font-family: inherit; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; }数字、订单号之类的数据用等宽数字对齐.price, .amount, .phone, .order-no { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }这里的思路是标题用流体排版适配屏宽正文用稳定单位保证阅读性数据用等宽数字保证对齐。三层各司其职不要混用。6.3 Web 字体的性能优化与调试如果设计稿指定了特殊字体需要自托管 Web 字体。上线前一定做三件事第一子集化。中文字体动辄几 MB如果只用到其中两三百个字可以用fontmin、subset-font这类工具切分出指定字符集切成 woff2 格式体积能缩到几十 KB。第二设置font-display: swap。font-face里加上font-display: swap;让浏览器在字体加载完成前先用默认字体渲染文本避免文字完全不可见的白屏。第三preload 关键字体。比如首屏的标题字体可以在 HTML 里加link relpreload asfont href/fonts/heading.woff2 typefont/woff2 crossorigin字体加载这块最容易出问题的就是 FOITFlash of Invisible Text字体不可见闪烁font-display: swap能基本解决。但有一点要注意swap会让页面先显示回退字体再切换成 Web 字体切换的瞬间布局会轻微跳变所以如果对版式要求极其严格可以考虑font-display: fallback它在切换期间不会闪超过 100ms体验更平滑一些。6.4 调试字体渲染的三种方法开发和调试字体时我一般用三个手段Chrome DevTools 的 Rendering 面板勾选 “Rendered Fonts” 后点击任意文本元素可以查看浏览器实际渲染用了哪个字体文件还能看到真实的字体名、字重、文件来源。这个工具在排查“为什么我设了 Arial 但显示出来不是 Arial”时非常管用。DevTools 的 Computed 面板点选元素后查看font-family的计算值确认是不是有别的样式覆盖了你的字体设置。在控制台里跑一小段脚本打印getComputedStyle(document.body).fontFamily快速检查页面全局字体有没有被某个组件样式污染。第六感倒是其次真正排查问题还是要靠实际渲染信息。特别是用了多套字体栈、又有 Web 字体混入时直接看 Rendered Fonts 面板比猜来猜去高效得多。7. 常见问题与排查技巧7.1 字体突然变成宋体是怎么回事这是中文网页最常见的问题明明在font-family里写了英文字体中文却在 Windows 上显示成宋体。原因几乎都是字体栈里缺少合适的中文回退字体比如写了font-family: Helvetica Neue, Arial, sans-serif;sans-serif在 Windows 上被解析成了宋体因为某些老系统的默认无衬线字体就是宋体。修复方法很简单把中文字体显式加入字体栈font-family: Helvetica Neue, Arial, Microsoft YaHei, sans-serif;如果想让标题、正文统一都是用黑体类字体不要写serif作为中文兜底而是明确指定Microsoft YaHei、PingFang SC或思源黑体。7.2 为什么移动端和桌面端字体大小不一致页面在手机上和电脑上显示的字体大小不一致通常是两个原因。一是没有设置text-size-adjust。iOS Safari 在横屏或某些情况下会自动放大文字需要加上html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }二是用了rem但根字号没有控制好。如果移动端布局没做根字号缩放那rem会保持桌面端的基准在手机上字就会显得偏小。这种情况下需要配合媒体查询或clamp()来调整根节点字号或者干脆正文用px、rem混合做局部适配。7.3 Web 字体加载引发闪烁和布局跳动页面出来先是没有文字然后突然出现或者文字先从 A 字体跳到 B 字体这是font-display设置的问题。给font-face加上font-display: swap;同时给字体文件做preload基本能缓解。如果布局还在跳多半是回退字体和 Web 字体的宽高差异太大可以考虑在字体加载成功前给文本区域一个最小高度或者使用font-display: fallback减少二次切换带来的跳变。7.4 粗体不生效和中文斜体发虚font-weight: 700;设置了但文字看起来没有变粗大概率是字体文件本身没有粗体档。解决办法是引入带粗体的完整字体家族或者使用可变字体。中文使用italic后文字发虚、笔画模糊是因为中文字体没有真正的斜体形态浏览器强行变形这种情况直接换成font-weight加大字重不要用font-style: italic。7.5 字体问题排查速查表现象常见原因解决方法中文显示宋体字体栈缺少中文字体回退在字体栈里明确加入PingFang SC、Microsoft YaHei等中文黑体字体移动端字体被放大未设置text-size-adjusthtml上添加text-size-adjust: 100%和-webkit-text-size-adjust: 100%Web 字体加载后页面跳动font-display未设置font-face中加font-display: swap;或fallback设置 bold 后文字不变粗字体文件缺少粗体档加载完整字体家族或使用可变字体数字在表格中不易对齐数字为比例数字添加font-variant-numeric: tabular-nums;font简写无效缺少font-size或font-family保证font简写里两个必填项齐全字体样式确实是 CSS 里最基础的知识点但越是基础的东西越容易在细节上翻车。我个人的习惯是新项目开始第一天就把全局字体栈、标题层级、正文字号定下来后续所有组件都基于这一套基础来做省掉后面大半的样式调试时间。如果你现在正被页面字体显示问题困扰按上面几个方向排查一遍基本都能找到答案。最后再分享一个小技巧做页面时在开发环境里把浏览器窗口拉窄拉宽观察标题和正文的缩放关系所有用clamp()做流体排版的文字都经过这一步实测就能避免上线后出现“手机上字号小到看不清”的尴尬。