中文到底贴基线还是铺满四条线？——从字体到 `vertical-align`

中文到底贴基线还是铺满四条线——从字体到vertical-align混排、角标、图标对齐时常会碰到同样是中文为啥有的字体底边贴着拉丁基线有的却几乎铺满顶线到下伸线本文用一个四线 Demo 把度量说清楚再对照 Mac 上两款常见中文字体最后补上前端最容易误用的vertical-align。配套 Demo改下font-family就可以看出区别我的是macbook电脑!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1/title文字四线示意/titlestyle:root{--font-size:96px;--line:#c0392b;--x-line:#2980b9;--baseline:#27ae60;--bottom:#8e44ad;}body{margin:40px;/* font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, system-ui, sans-serif; */font-family:Hiragino Sans GB,sans-serif;background:#f7f8fa;color:#222;}h1{font-size:18px;font-weight:600;margin-bottom:8px;}.hint{font-size:13px;color:#666;margin-bottom:24px;line-height:1.6;}.stage{position:relative;display:inline-block;padding:48px 32px 56px;background:#fff;border-radius:12px;box-shadow:0 8px 24pxrgba(0,0,0,0.06);}.sample{position:relative;z-index:1;margin:0;padding:0;font-size:var(--font-size);line-height:1;/* 用固定 line-height方便对齐四线 */font-weight:400;letter-spacing:0.04em;color:#111;white-space:nowrap;}/* 四条线相对 .sample 的 em 盒定位 */.guide{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed currentColor;pointer-events:none;z-index:2;}.guide span{position:absolute;left:100%;margin-left:10px;top:-0.65em;font-size:12px;line-height:1;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}/* 顶线em 盒顶部 0 */.guide.top{top:0;color:var(--line);}/* x 顶线约在 baseline 上方 1ex 这里用 JS 量真实 x-height 更准CSS 兜底用 0.5em 近似 */.guide.x-height{top:calc(1em - 1ex);color:var(--x-line);}/* 基线默认 alphabetic约在 em 盒底部上方一点 用 JS 精确测量后会覆盖 top */.guide.baseline{top:0.8em;/* 兜底近似JS 会改成精确值 */color:var(--baseline);border-top-style:solid;}/* 底线em 盒底部 1em含 g/j/y 下伸部 */.guide.bottom{top:1em;color:var(--bottom);}.legend{margin-top:20px;display:grid;gap:6px;font-size:13px;}.legend i{display:inline-block;width:28px;border-top:2px solid;vertical-align:middle;margin-right:8px;}/style/headbodyh1文字渲染四线 Demo/h1pclasshint内容codeg j y 汉字测试/codebr/顶线 / x 顶线 / 基线 / 底线。基线与 x 高度用 Canvas 按当前字体实测。/pdivclassstagedivclasssampleidsamplespanclassguide topspan顶线 (ascent / em top)/span/spanspanclassguide x-heightidxLinespanx 顶线 (x-height)/span/spanspanclassguide baselineidbaseLinespan基线 (baseline)/span/spanspanclassguide bottomspan底线 (descent / em bottom)/span/spanx g j y 汉字测试/div/divdivclasslegenddivistyleborder-color:var(--line)/i顶线字形盒子顶部/divdivistyleborder-color:var(--x-line)/ix 顶线小写 x 顶部高度/divdivistyleborder-color:var(--baseline);border-top-style:solid/i基线拉丁字母“站”的线g/j/y 主体落在这条线上/divdivistyleborder-color:var(--bottom)/i底线字形盒子底部g/j/y 下伸部碰到附近/div/divscriptfunctionmeasureMetrics(el){conststylegetComputedStyle(el);constfont${style.fontWeight}${style.fontSize}${style.fontFamily};constfontSizeparseFloat(style.fontSize);constcanvasdocument.createElement(canvas);constctxcanvas.getContext(2d);ctx.fontfont;// alphabetic 基线相对 em 顶的距离constmctx.measureText(x g j y 汉字测试);// 现代浏览器支持这些字段constascentm.fontBoundingBoxAscent??m.actualBoundingBoxAscent??fontSize*0.8;constdescentm.fontBoundingBoxDescent??m.actualBoundingBoxDescent??fontSize*0.2;constxAscent((){constxmctx.measureText(x);returnxm.actualBoundingBoxAscent??fontSize*0.5;})();// 对 line-height:1 的盒子文字大致按 alphabetic 对齐// 基线约在ascent从 em 顶往下// 为了视觉对齐 content box用 ascent/(ascentdescent)*1emconstemascentdescent;constbaselineFromTop(ascent/em)*fontSize;constxTopFromTopbaselineFromTop-xAscent;return{baselineFromTop,xTopFromTop,fontSize};}functionpaint(){constsampledocument.getElementById(sample);const{baselineFromTop,xTopFromTop}measureMetrics(sample);document.getElementById(baseLine).style.topbaselineFromToppx;document.getElementById(xLine).style.topMath.max(0,xTopFromTop)px;}paint();document.fonts?.ready?.then(paint);window.addEventListener(resize,paint);/script/body/html一、先认清四条线看一行字时可以叠四条水平参考线线英文常见叫法含义顶线ascent / em top字形度量盒顶部x 顶线x-height小写x的顶部基线baseline拉丁字母“站”的线g/j/y主体落在这里下伸部伸到下面底线descent / em bottom字形度量盒底部g/j/y尾巴常伸到这里附近Demo 用的示例文本x g j y 汉字测试x顶在 x 顶线底在基线g/j/y主体在基线尾巴伸向底线汉字高度、底边相对基线的位置强烈依赖字体设计关键点“按基线对齐”≠“汉字墨迹底边一定等于基线”。前者是排版引擎的对齐规则后者是字体怎么画方块字。二、同一个 Mac两款字体两种中文在 MacBook 上用四线 Demo大字号 画线可以稳定复现1.PingFang SC汉字几乎占满四条线font-family:PingFang SC,sans-serif;观感汉字顶边接近顶线基线穿过汉字偏下位置汉字底边更靠近底线放大后非常明显不是“像x一样只站在基线上”2.Hiragino Sans GB汉字贴着基线font-family:Hiragino Sans GB,sans-serif;观感汉字底边明显靠近基线与x底更一致不会像苹方那样几乎铺满到下伸线更符合口语里说的「中文贴基线」Demo 当前默认就是冬青黑body{font-family:Hiragino Sans GB,sans-serif;}切换对比时只需改这一处刷新即可。对照小结font-family汉字相对四线一句话PingFang SC几乎占满顶线→底线满格方块字Hiragino Sans GB底边贴近基线更贴基线结论很实在混排规则一样汉字墨迹怎么落在 em 盒里由字体决定。小字号如 16px时苹方也可能“看起来像贴着x”放大或画上四条线后满格特征就会露出来。做像素级对齐不要只看小字截图。三、四线 Demo 在做什么文件sse-demo/四条线.html1. 用line-height: 1固定 em 盒.sample{font-size:96px;line-height:1;/* 方便四线对齐 */}此时顶线 ≈ 盒子顶部top: 0底线 ≈top: 1em2. 用 Canvas 实测基线与 x 高度constmctx.measureText(x g j y 汉字测试);constascentm.fontBoundingBoxAscent??...;constdescentm.fontBoundingBoxDescent??...;constxAscentctx.measureText(x).actualBoundingBoxAscent;constemascentdescent;constbaselineFromTop(ascent/em)*fontSize;constxTopFromTopbaselineFromTop-xAscent;再把绿线基线、蓝线x 顶线画到对应位置。3. 使用方式浏览器打开四条线.html改font-family为PingFang SC/Hiragino Sans GB看汉字底边相对绿线基线、紫线底线的位置DevTools → Computed → Rendered Fonts确认真正用到的字体文件四、vertical-align到底对齐的是什么很多人把「中文贴不贴基线」和vertical-align混在一起。其实字体决定汉字墨迹相对基线画在哪vertical-align决定行内盒图标、inline-block、图片等相对周围文字如何对齐它主要作用于inline/inline-block/table-cell不是用来垂直居中普通块级盒子的万能属性。常用取值说明值含义行内场景baseline默认元素基线与父级基线对齐middle元素中线对齐到父级基线 半个 x-height不是几何正中text-top对齐到父级字体顶线em 顶附近text-bottom对齐到父级字体底线em 底附近top对齐到整行行框顶部bottom对齐到整行行框底部sub/super下标 / 上标基线长度/%相对父级基线上下偏移%相对line-height和四条线的关系帮助记忆text-top ≈ 往顶线靠 middle ≈ 围绕「基线 ½ x-height」 baseline ≈ 贴基线对齐默认 text-bottom ≈ 往底线靠 top/bottom ≈ 相对整行行框不只是文字度量实战注意图标配中文默认baseline时图标底会按基线对齐若当前是苹方汉字偏满格光学上图标可能显得偏上/偏下。可试middle或微调.icon{vertical-align:middle;/* 仍不齐时再光学补偿 */transform:translateY(0.05em);}middle≠ 绝对垂直居中规范定义是相对「基线 半个 x-height」中英混排、不同字体下观感会漂。字体先于vertical-align同一套vertical-align: baseline换成苹方或冬青黑汉字自身高低已经不同角标观感也会变。先定font-family再调对齐。想要「中文贴基线」的混排观感Macfont-family:Hiragino Sans GB,sans-serif;这是字体选择问题单靠改vertical-align改变不了汉字在 em 盒里的画法。五、给前端的实用建议中英混排、角标、数字徽章在目标机型上用四线 Demo 或放大检查不要只看 16px。Mac 上若明确要「汉字底边贴基线」的观感优先试font-family:Hiragino Sans GB,sans-serif;若产品规范是苹方很多 App UIfont-family:PingFang SC,sans-serif;要接受汉字更偏满格对齐靠vertical-align 少量translateY做光学补偿。vertical-align管的是行内元素怎么对齐到文字度量/行框管不了字体把汉字画成贴基线还是满格。六、总结四条线顶线 / x 顶线 / 基线 / 底线是看清混排的尺子。在 Mac 实测中PingFang SC汉字几乎占满四条线Hiragino Sans GB汉字更贴基线vertical-align的baseline/middle/text-top/text-bottom/top/bottom等描述的是行内盒对齐方式应结合四条线理解。字体决定汉字落点vertical-align决定旁边元素怎么跟上——两者分工不同不要互相替代。如需把文中 Demo 片段改成「可切换苹方 / 冬青黑」的双栏对比版或补一段角标对齐的完整 CSS 示例可以再说一下我按同一文风补一节。