上次帮朋友排一套产品手册我差点被“字体基础设置”逼疯。微软雅黑默认行距在导出PDF后挤成一团标题字距怎么调都不对劲最离谱的是我把一段备注用隐藏文字藏起来对方打印出来时它又明晃晃出现在纸面上。后来我才意识到很多人对字体的理解停留在“选个好看的字体”这一步根本没搞懂字体基础设置、高级设置与隐藏文字之间的关系。这篇内容我就把这些经验梳理一遍从最基础的字号字重到OpenType特性、可变字体、字距微调再到隐藏文字的各种玩法与坑一次讲清楚。无论你是用Word写报告、做PPT还是在写网页调CSS甚至是在PS/InDesign里做设计物料这些内容应该都能帮上忙。1. 字体基础设置先把底子打好字体基础设置是所有文字排版工作的起点。这里说的“基础”不是让你背几个字体名称而是要把字号、字重、行距、字距之间的关系真正理顺。我看了很多排版混乱的项目根子上不是审美不行而是这几个基础参数在互相打架比如行距设置成了固定值导致中文字被裁切或者同一页面里混了七八种字重看起来像补丁。1.1 字号、字重与字族的选型逻辑字号这个事不同场景有不同规矩。常见的中文正文Word里小四12pt是标准起点印刷物料里正文常用9pt到10.5pt网页端基准字号一般是16px。需要注意一个细节中文字形在相同磅值下通常比西文字形视觉尺寸更大所以要混排中英文时英文部分适当降1pt或者选择同字族里略微收敛的字重观感才平衡比如中文用12pt时英文可以设在10.5pt到11pt之间小细节但效果差异非常明显。字重方面常规的中文字体家族通常包含Light、Regular、Medium、Bold这几个档位。正文推荐Regular标题用Medium或Bold就够了。不少人在正文里用Bold以为这样“重点突出”结果整页字面变得又黑又堵。我自己的习惯是正文和标题之间用字重拉开层级比如正文Regular一级标题Bold二级标题Medium三级标题用加粗的正文这样不用增大字号也能做出清晰的信息层级页面不躁。字族选型更关键。先分清衬线serif和无衬线sans-serif两条路线。中文长文阅读像思源宋体、宋体这类衬线字体更利于视线在字间移动屏幕展示、演示文稿、网页UI则优先无衬线也就是微软雅黑、苹方、思源黑体这条线。Windows下默认的微软雅黑在低分辨率屏幕上的抗锯齿表现尚可但放在印刷物里会显得单薄所以印刷项目我一般换成思源黑体或方正书宋。记住一个原则一个项目里字族控制在2到3种以内正文一种标题一种最多再加一个强调字体再多就像超市打折海报了。1.2 行距、字距与段落间距的联动关系行距这块中文排版我一般用1.4到1.7倍行距正文在Word里最省事的做法是设置“1.5倍行距”再根据版面微调。要注意的是Word里“固定值”行距是个坑如果你把行距固定为20磅一旦某个段落里出现大字号或公式文字就会被裁掉一半切换到“最小值”或“多倍行距”能避掉这个问题。印刷排版中9pt正文配14pt左右的固定行距比较常见InDesign里我常用自动行距它通常是字号的1.4倍左右配合“罗马字距”选项基本不会出大错。字距分两种理解一种是整体字距调整专业说法叫tracking另一种是特定字符对之间的调整即kerning。中文正文的字距平时保持默认0就好不要为了“透气”去拉大一拉大满篇中文就像散架一样。标题则相反尤其是有一定磅值的大标题适当增加tracking可以让它更有呼吸感但不建议超过原始磅值的百分之十到十五比如36pt的标题整体字距加到2到4之间就差不多了。段落间距要和行距联动考虑如果行距已经是1.5倍段落之间的间距不需要再单独加很多否则页面会失去连续性。中文段落首行缩进两个字符Word里在“段落-缩进-特殊格式-首行缩进-2字符”设置这个习惯对长文档非常友好。还有一个经常被忽略的细节段距不要用连续回车来实现要改段落格式里的段前段后值。回车撑出来的“假段距”一旦调整行距或字体大小就会全面漂移后面改版会非常痛苦。2. 字体高级设置从“能用”到“好用”基础设置解决的是“看得清、不难受”高级设置追求的才是“精致、专业”。在Word的“字体”对话框里“高级”选项卡常年被人忽略PS/InDesign的字符面板里右上角菜单还藏着大量OpenType选项。这部分我分成两条线讲一条是排版软件里的字距与OpenType特性另一条是Web端字体的高级控制。2.1 OpenType特性与连字开关OpenType是一个字体格式规范它不只是把字形轮廓包在文件里还内置了很多排版特性需要软件主动调用才能生效。最常用的几个特性包括标准连字liga、等宽数字tnum、旧式数字onum、小型大写字母smcp等。标准连字在英文排版里非常关键。像fi、fl这类字母组合如果直接用原始字形f的顶部钩子会和i的点打架视觉上很糟心。开启liga后字体会自动替换成连字字形阅读更顺滑。很多人第一次在Word里看到fi连在一起以为是乱码其实是连字在起作用。如果你或你的领导觉得这个“不对劲”可以在字体高级设置里关掉“OpenType功能”里的连字选项。再说数字表格里的数字推荐用等宽数字tnum它会强制每个数字占同样宽度这样一列数字上下对齐才整齐。在正文叙述里反而可以用比例数字也就是默认模式看起来更自然。InDesign里切换很方便选中文字后打开字符面板右上角的菜单在OpenType子菜单里勾选就行。CSS里对应的是font-feature-settings: liga, tnum;但要注意这个属性的取值在不同浏览器里兼容性有些差异建议结合font-variant-numeric等更语义化的属性一起使用。再补充一个小技巧英文标题里想用小型大写字母直接在Word的“高级-OpenType功能”里选“小型大写字母”比手动把小写字母调成小字号再改大写更专业而且字体换了也不会错位。2.2 可变字体与字距微调kerning可变字体是这几年比较值得关注的趋势。一个可变字体文件可以包含从细到粗、从窄到宽的多套字形用一条连续的“轴”来控制比如weight轴从100到900任意取值。这样设计网站时同一字体家族里不同字重可以共享一个文件加载速度提升非常明显。如果你在做Web项目可以在Google Fonts上找一些支持可变字体的中英文字体用font-weight直接设一个中间值比如wght500.5传统静态字体做不到这种精度。字距微调方面需要区分kerning和tracking。tracking是“全局字距”作用于一段文字的所有字符kerning是“特定字符对间距”针对AV、To、Va这类字母组合。大部分排版软件的默认字距已经经过设计师调校日常正文不需要动。但在大字号标题里我会把字距模式调到视觉字距optical kerning让软件根据字形轮廓计算间距再手动检查几个明显不协调的字组。比如Av这个组合很多字体默认的负间距不够放大后显得空洞我就手动把这两个字符的字距调小2到4个单位。中文大标题我一般不用kerning直接拉整体tracking控制在0到50之间超过这个数会有松散感。这里要特别提醒在中文段落中千万不要为了“居中好看”而用tracking把所有字符强行拉宽。全角标点被拉宽后逗号句号的视觉重量会异常整段文字读起来非常累。2.3 在Web CSS里的高级字体设置网页字体设置和办公排版最大的区别在于你要考虑加载失败、系统差异、屏幕渲染三个问题。最基础的做法是给body设置一组“系统字体栈”尽量用操作系统自带的字体避免额外加载字体文件。比如body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, PingFang SC, Microsoft YaHei, sans-serif; font-size: 16px; line-height: 1.6; font-feature-settings: liga, tnum; }这样写的好处是Mac优先用苹方Windows优先用微软雅黑都没有就退到通用无衬线无论在哪个平台打开都不会出现“字体很丑”或者“变成方框”的尴尬。如果你坚持要用某个品牌字体就需要引入Web Font。中文Web字体文件往往好几兆甚至十几兆不建议整包引入。更稳妥的做法是使用字库服务商提供的按需子集化方案或者只截取用到的文字做成子集字体文件。另外字体授权问题要提前确认商业项目使用非免费字体要特别谨慎。CSS里的font-feature-settings属性可以开连字和等宽数字但建议用font-variant组合替代因为后者更符合未来规范可读性也更好。3. 隐藏文字看不见却有大用途隐藏文字听起来像小把戏实际上用好了是效率放大器。它的核心机制一句话就能说清楚文字内容依然存在于文件里只是被设置为不可见。基于这个机制你可以实现很多微妙的需求比如在文档里塞备注而不影响正式内容的阅读在网页里实现折叠展开在PDF里保留可以被检索和复制的文本层。但如果不了解它的行为细节也很容易踩坑。3.1 隐藏文字的本质与实现方式先说Word里的实现。选中文字按CtrlD打开字体对话框在“字体效果”里勾选“隐藏”文字会直接从屏幕上消失。想让它重新显示有两种方式一种是用快捷键CtrlShiftH再次切换另一种是在“文件-选项-显示”里勾选“始终在屏幕上显示这些格式标记-隐藏文字”。这里有个关键区别取消“隐藏文字”勾选只是让文字可见并不会把你套用的隐藏格式删掉如果你想要彻底恢复普通文字需要选中后再按一次CtrlShiftH或者取消勾选。我经常看到有人把整段内容设置了隐藏后来又忘了哪些是隐藏的导致文档里凭空多出几段看不见的文字最终打印时全部冒出来。CSS里隐藏文字的花样就更多了。display:none是把元素彻底移出渲染层就像文档里不存在一样但这种做法对屏幕阅读器也不友好。visibility:hidden只是隐藏视觉元素还在布局里占位。无障碍优化里最推荐的是“裁剪到1像素”方案也就是所谓的sr-only它让视觉读者看不到但屏幕阅读器仍然能读到同时不会影响布局。下面这组样式是业界通用做法.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }在PDF和设计软件里隐藏文字的形态更特殊。OCR过的PDF通常会包含一个隐藏文本层视觉上你看到的可能是扫描图片或有版式的文本实际可供复制检索的内容在这个隐藏层里。InDesign里想藏文字可以放到一个不打印的图层或者把文字颜色改成纸色但这些方式一旦导出PDF就要非常小心。3.2 隐藏文字的实战场景最实用的场景之一是文档备注。你可以把给团队看的说明、解释性注释放在正文旁边并设成隐藏文字正式交付版本中看不见但你自己打开“显示隐藏文字”就能看到当时的思考痕迹。对于审核流程比较复杂的项目这种备注比单独写一份说明文档更不容易丢。第二个场景是网页的折叠展开。比如文章太长需要默认隐藏部分内容点击“展开全文”再显示这时候用_display:none配合一个状态切换JavaScript就能实现。要注意的是搜索爬虫对display:none内容的收录态度并不统一如果这段被折叠的内容包含关键信息建议让它在默认渲染中可见再通过交互去改变而不是一开始就隐藏。第三个场景是无障碍优化。图标按钮、图片链接用户看不见文字含义但屏幕阅读器需要读出相对应的说明文字。常见的做法是给这类元素加一个sr-only的文本比如“关闭窗口”“回到顶部”视觉上干干净净读屏软件可以正常播报。这个做法也是很多无障碍标准里明确推荐的。第四个场景是版权信息与防伪。在设计稿里把水印文字放在底层并降低透明度或者在元数据里嵌入版权信息本质上都可以算“隐藏文字”的一种应用。不过在印刷物中如果你把文字颜色设置成纸张的白色来达到隐藏目的很多印刷商在色彩分色时还是会印出一个“淡淡”的灰影这个坑我已经踩过好几次。这里必须提一个反面案例不要在网页里为了堆关键词把大量隐藏文字铺在页面底部也就是常说的白色文字堆词。搜索引擎对这种操作非常敏感有成熟的反作弊体系识别隐藏文本一旦命中轻则关键词排名消失重则整站降权。如果你是做正经内容和正规渠道推广完全没必要。”隐藏文字“的设计初衷是辅助功能、注释、折叠交互而不是钻空子。3.3 隐藏文字的坑导出、打印、兼容性最常见的坑来自Word打印。你把隐藏文字设置好了在屏幕上确实看不见但是同事那台电脑的文件选项里勾选了“打印隐藏文字”他按CtrlP打印隐藏文字全部出现在纸面上。所以要交付打印版文件时如果你不想暴露隐藏内容不要仅仅依赖隐藏文字格式最稳妥的方法是直接把这段文字删除或者在打印前检查一遍打印选项。第二个坑是Word导出成PDF。隐藏文字在转PDF时不同版本、不同转换器的处理方式不一样。我自己做的一个测试结果Microsoft Office 2016后Word转出的PDF默认不渲染隐藏文字的视觉内容但隐藏文字对应的文本层是否保留并不一定取决于具体导出设置和第三方转换器。这就意味着你原以为是绝密的备注可能在PDF里被人用文字工具直接搜出来。要验证很简单导出后用PDF阅读器的全文搜索功能搜一个备注里的生僻词如果搜到了说明隐藏文字正在某个层里躺着。第三个坑是字体兼容性。无论是不是隐藏文字只要项目里引用了不常见的字体到了别人机器上就可能被替换成默认字体版面完全变样。特别是中文环境中某些商用字体在他人电脑上不存在系统会临时用宋体或黑体代替间距全乱。解决办法是嵌入式字体Word里通过“文件-选项-保存-嵌入字体”来做输出印刷文件时InDesign里勾选“PDF导出-包含字体-子集”。但要注意字体授权有些字体不允许嵌入这点在商务合作时一定要提前确认。4. 常见问题与排查技巧实录这部分我整理了这几年反复遇到的问题做成一个快速排查的索引按“问题-原因-解决办法”来看能少走不少弯路。问题常见原因处理方式同一份文档在不同电脑上字体变了源字体没装或未嵌入嵌入字体或用系统安全字体栈重排中文字显示成方框“□□”字体不包含中文字形或编码异常切换为宋体/黑体/思源等中文字体检查文件编码Word隐藏文字打印时出现在纸面“打印隐藏文字”选项被勾选文件-选项-显示-打印选项取消勾选转出来的PDF里能搜到隐藏备注转换器保留了隐藏文本层直接删除备注文字或导出后用全文搜索自检网页上的Web字体没生效字体文件名拼写错误或未成功加载F12打开网络面板确认woff2请求返回200与content-typeCSS display:none的内容读屏读不到display:none会移除无障碍节点改用sr-only方案让读屏软件正常播报中文标题加字距后标点也散开了对中文全文做了全局tracking中文正文tracking归0只对标题微调展开讲几个重点。中文字体变方框八成是字体代换导致。比如一个西文字体并不覆盖中文字符系统找不到对应字形就只能回退到系统的“notdef”方框。这时你在Word里全选文字切换成一个明确包含中文的字体比如“思源黑体”“微软雅黑”“宋体”基本能当场解决。如果是Web环境检查font-family里是否在字体栈最后有无衬线兜底不要只写“NotoSerifSC”这种需要联网才能加载的字体名否则断网就全变方框。网络类的问题我遇到过最无语的一种是CSS加载了明明正确的woff2但浏览器显示的是系统字体。排查方式是打开浏览器开发者工具切到Network面板刷新看那个字体请求返回的HTTP状态码。如果返回404多半是路径拼写错误如果返回200但显示字体没有应用检查一下是不是font-weight或font-display配置把字体“饿死”了比如你只引入了weight 500的字体但CSS里写的是font-weight: bold浏览器会补造一个假粗体效果和预期完全背离。压缩包传输导致的选字问题也值得提一句传给别人的压缩包中字体文件没包含在内对方打开工程文件就会提示缺失字体。很多设计师习惯把设计稿和字体文件一起打包可有些办公者发Word文件时完全不记得把字体带上。Word里嵌入字体后文件会变大很多十几兆都正常需要权衡。我自己在交付重要文档时会在文件名后面加一个“嵌入字体版”后缀这样对方如果遇到字体问题至少知道这个文件是自带字体的。最后一类影响比较大的问题是隐藏文字与文档协作的冲突。多人协同编辑时有人开着一份“显示隐藏文字”的视图有人关着结果两人在沟通“这段到底要不要保留”时会出现信息错位。我处理这类情况的方法特别简单在文档顶部的批注区用文字明确写出“文档中采用了隐藏文字共X处如需查看按CtrlShift8”避免同事在不知情的情况下打印出隐藏内容也方便对方自行选择可见性。这一个习惯建议你也试试每次做完一份文档或页面导出PDF后用全文搜索“的”“是”“了”这类高频字再随意点几处文字复制粘贴到记事本确认没有多余的隐藏文本层再交付出去。花不了两分钟但能避免很多让人社死的尴尬。最后再分享一个和字体加载相关的小技巧。做Web页面时如果必须使用远程字体且你担心加载过程中文字不可导致切换闪烁要给font-display设置一个合适的取值。默认auto可能在字体下载完成后突然替换文字观感跳变改成font-display: swap会让文字先用系统字号渲染字体加载完成后再平滑替换虽然有一点闪烁但至少用户不会盯着空白页面发呆。中文Web字体由于体积大优先推荐swap更激进的做法是用localStorage缓存字体文件不过这已经属于性能优化范畴了下次有机会再单独讲。字体这个领域水很深你能耐心看到这里说明至少已经愿意把文字排版当回事了这比用什么字体本身要重要得多。
