前言：从600调到500，标题却像换了字体？问题出在微软雅黑字重只有三档，font-weight 500实际渲染成400，粗细跳变让海报和网页排版对不上设计稿。本文分享字体字重调节的三种解法：text-stroke描边法精确补粗削细、换用思源黑体Medium字重、辅助微调，并提示预览区描边缩放的落地坑，帮你在只有两档的系统里挤出「只细一点点」的连续字重。
从600调到500，我的标题像换了个字体
前两天，有个朋友来找我，他做电商的，当时正在赶一张开业海报。
大红底，金字，主标题占半个屏。
他卡在了一个特别小的问题上，小到他自己都不好意思开口。
主标题的字重，从600改到500，想让笔画细一点点。
结果整个标题像换了个字体。
600那版，厚重，有气场，但显得有点笨。500那版，直接发虚，笔画单薄得撑不住那么大的字号，跟副标题傻傻分不清楚。
他发了两张截图给我，我对着看了一分钟，第一反应是，？？？这中间是真空旷。
他要的感觉，真的就只是细一点点。
一点点啊朋友们。
就这「一点点」，他调了一晚上。600和500之间像隔了一条天堑，左边是粗，右边是细，中间什么都没有。他一度怀疑是不是自己眼睛出了问题，或者设计稿的参考线坏了。
不是哥们，你没看错，是系统压根没给你中间那档。
这事我遇到过，不止一次。今天顺着这个，把我踩过的坑、试过的办法，掏出来跟大家聊聊。也说不上什么高深技巧，就是土办法，但真管用。
你可能不做海报，但你做PPT、做网页、写公众号排版，早晚都会撞上同一个幽灵，Windows下的字体渲染。
先讲为什么会「跳变」。
Mac上的苹方，设计的时候就是按全字重来的，Light、Regular、Medium、Semibold、Bold，一档一档排得整整齐齐。你写500就是500，写600就是600，丝滑得很。
Windows上的微软雅黑，独立字重文件只有三个。msyhl是细体，对应300。msyh是常规体，对应400。msyhbd是粗体，对应700。
就这三把钥匙。
你写font-weight 600？浏览器一查，没有600的钥匙，行，用700的粗体。你写500？也没有，走400的常规体。
所以500和400，渲染出来一模一样。600和700，也一模一样。
你以为是旋钮，其实只有两个按钮。咔哒，粗。咔哒，细。中间什么都没有。
这个认知一旦建立，很多事就通了。以前老有人问我，为什么自己做的东西跟设计稿对不上，我说你先确认一下设计稿是不是在Mac上出的，十有八九是。同一个页面，Mac上看刚刚好，发到Windows上要么粗一圈要么细一圈。不是你的问题，是字体家族里压根没有中间档。
那怎么办？真的只能二选一？
不。有办法。这也是今天最想分享的。
1、用描边，把笔画「填」或「削」到你想要的粗细。
这是我自己用下来最顺手、也最推荐的一招。
思路很简单，既然系统没有中间档的字体，那我们就自己造一档。造的方法，用-webkit-text-stroke，文字描边。这个属性支持任意小数像素，0.3px、0.8px、1.8px，你想多细就多细，想多粗就多粗，平滑过渡，不跳档。
两个方向都能玩。
方向一是基于常规体往上加。主标题的基准字重写成500，实际渲染走的是400的常规体，然后叠一行-webkit-text-stroke，值取1.8px，颜色跟文字同色，#101010。等于给每一笔都精确补粗了1.8px，视觉上就出现了一个介于400和700之间的字重。我们那张海报最终就是这个方案，出来不多不少，正好是设计稿里那个Medium偏SemiBold的味道，不笨，也不虚。
副标题同理，基准500，描边1.0px，笔画轻度加重，跟主标题拉开层次，又不抢戏。
方向二是反过来，基于粗体往下削。基准字重写成600，然后叠一层透明色的描边，描边会向内侵占笔画边缘，等于把粗体「削」薄一点。适合你想从粗往细调的场景。
2、换一个天生就有Medium字重的字体。
如果你不介意字体文件本身，这招更省心。
思源黑体，以及它的Google版Noto Sans SC，原生就设计了500这个Medium字重，不是靠系统跳档凑出来的。引一行Google Fonts的链接，wght取500和700，然后你写font-weight 500，它给你的就是真的500。
但这里有个现实问题。海报这种场景，经常是离线、内网，或者要发给别人直接打开，Google字体服务在国内还得看缘分。真要离线用，你得把NotoSansSC-Medium.woff2下下来放进assets目录自己托管。而且思源黑体一个字重动辄几兆，放网页里得掂量一下加载速度。
3、剩下的就是些辅助手段。
把letter-spacing稍微拉开一点，配合-webkit-font-smoothing的antialiased，能缓解一点像素挤压的观感。但说实话，它改变不了字重本身，只能算锦上添花。想让某个小标题显得轻盈一点，可以试试。想靠它实现「只细一点点」的正主级效果，不太行。
这三招的顺序，也是我的推荐顺序。描边法零依赖、精确到小数像素、改起来最快。换字体最省心，但要看环境。辅助手段治标不治本。
但事情还没完。落地的时候有个坑，差点让我们白忙活一场。
那张海报是带编辑功能的，就是做海报的人，可以在网页里自己改标题、改副标题，实时预览。预览区那个小卡片，如果也照搬1.8px、1.0px的描边，因为显示尺寸缩小了，描边会显得特别粗，预览效果跟实际大图对不上。
所见非所得，这是排版工具的死穴。
解法也简单，预览区按比例缩放描边，比如0.35px和0.2px，跟大图的视觉比例保持一致。你调字重的时候，预览区和大卡渲染出来的粗细观感才能对齐。这块需要注意一下，不然你调了半天以为对了，一放大，又变了。
说点实在的，这招也不是没有代价。
描边法在笔画复杂的中文字上，字号小的时候容易出毛边，尤其是「繁」「齉」这种笔画密到打架的字，1.8px的描边下去，边缘会有点糙。我自己的感受是，字号越大越稳，海报主标题这种大字场景是它的主场，正文小字慎用。另外text-stroke在老内核的浏览器上兼容性一般，内部工具还好，对外公开展示的页面，要先测一轮。
所以你看，这一整套折腾下来，其实没有多高深的东西。
就是一个认知，系统只给你两档，但你的需求是连续的。然后找到那座把连续和离散接起来的桥。
这事让我想到挺多的。
现在大家写代码，都爱让AI代劳，我也一样，天天跟Claude Code泡在一起。但你让AI去调这个字重，你猜它会怎么干？大概率是给你把font-weight从600改成500，然后说，调好了。
因为它活在规范里。规范说500就是500。
它不知道你的用户里有一半人在Windows上，不知道微软雅黑只有三档，不知道你写下500的那一刻，渲染引擎咔哒一声，给你跳回了400。
AI活在抽象的规范里，我们活在具体的渲染里。
这也让我想起一个更老的道理。人的眼睛和系统之间，永远隔着一层翻译。你以为你在跟颜色对话，其实你在跟RGB通道对话。你以为你在调粗细，其实你在跟三个字体文件对话。
设计师这个行当，很多时候干的活儿，就是在这类「只有两档」的系统里，硬生生挤出那个「只细一点点」。
外行看，600和500有什么区别？区别大了。粗一分是雄壮，细一分是清秀，粗一分是土，细一分是高级。海报这种东西，路人的眼睛一秒钟扫过，标题的粗细，就是标题的气场。0.5px的差别，就是两种气质。
这种较真，在外人看来可能有点神经质。
但我始终觉得，这个世界就是靠这种较真往前走的。字重多一档，海报好看一点。行距多两像素，文章好读一点。描边细0.3px，画面干净一点。一点一点攒起来，就是所谓的设计感。
所以回到最开始那个朋友。他后来把方案一接进了编辑弹窗，主标题1.8px，副标题1.0px，预览区0.35和0.2，齐活。
他跟我说，原来「只细一点点」，不是玄学，是数学。
我说对，是0.5px的数学。
如果你也正好卡在某个「只有两档」里，不管是字重、行距，还是别的东西，你可以试试这个思路。先搞清楚系统到底给了你几档，再想办法把中间那段补出来。描边法、换字体，或者你自己发明的别的招，都行。
我不知道这套经验对大家有没有用，但我已经毫无保留地分享了。坦率的讲，我自己也是被这个问题折磨过好几轮，才攒下这么点东西。
毕竟，设计的本质，就是跟离散的世界，讨要那一点点连续。
> / 注意，本项目仅在 SyncMein 的500人小群分享。
> / 谢谢你看完了我的文章，我们下次再见吧。
> / 作者：明察
> / 投稿或爆料，请联系邮箱：mingcha@gqmg.com
标签：微软雅黑, 思源黑体, 描边法, 字体渲染, 字重
关键词：字体字重调节, 微软雅黑字重只有三档, font-weight渲染跳变, text-stroke描边调节字重, 思源黑体Medium字重 
暂无评论内容