CSS文字加粗不改宽，text-shadow模拟加粗方法

本文深入探讨了在CSS中实现“文字加粗却不改变宽度”这一常见设计难题的多种技术路径与实际陷阱：指出传统text-shadow模拟加粗易因软边阴影导致小字号或Retina屏下文字模糊，强调必须设blur-radius为0并采用多方向1px硬边阴影（如±1px横向/纵向）配合GPU加速才能兼顾清晰与稳定；同时揭示font-weight并非总能精准映射字重（如bold不等于700），推荐优先使用支持font-variation-settings的可变字体调'wght'轴，或退而求其次采用SVG stroke方案；最后提醒开发者正视现代浏览器对font-weight渲染的优化——多数场景下600/700带来的宽度变化已微不可察，与其陷入技术妥协，不如回归字体本质与真实体验。

text-shadow模拟加粗会导致文字模糊？

会，尤其在小字号或Retina屏上明显。本质是用多个偏移的阴影叠加“撑开”笔画，但阴影是软边，不是矢量加粗，边缘必然发虚。

• 只对 font-weight: normal 且无原生加粗支持的字体有效（比如某些自定义Web Font）
• text-shadow 的 blur-radius 必须为 0，否则模糊加剧；常用组合是 0 0 1px 多方向叠加
• 横向叠加（如 -1px 0 0, 1px 0 0）比纵向更安全，避免行高意外变化

真正不改变宽度的加粗方案有哪些？

纯CSS里，font-weight 改变通常伴随字宽变化（尤其非等宽字体），想“视觉加粗但占位不变”，只有两个靠谱路径：

• 用支持 font-variation-settings 的可变字体，调 'wght' 轴：例如 font-variation-settings: 'wght' 700; —— 这是字体自身设计的连续加粗，宽度几乎不变
• 用 SVG 文本 + stroke：把文字转成 ，设 fill: none 和 stroke: currentColor，再通过 stroke-width 控制粗细 —— 完全可控，但丧失文本可选、可搜、可缩放优势
• 放弃“完全不改变宽度”的执念：现代浏览器对 font-weight 的渲染已优化很多，多数场景下 600 或 700 带来的宽度浮动在1px内，肉眼难辨

为什么 font-weight: bold 不总等于 font-weight: 700？

因为 bold 是关键字，浏览器会按字体族中“最接近bold的可用字重”映射，不一定对应数值700。比如某字体只提供400和900两档，font-weight: bold 就会落到900，而 font-weight: 700 可能被降级到400（或插值模拟）。

• 查字体实际支持的字重：用浏览器开发者工具的“Computed”面板看 font-weight 最终计算值
• 用 @font-face 显式声明每个字重的 font-weight 值，避免浏览器猜错
• 慎用 font-weight: bolder / lighter：依赖父元素字重，行为不可控

text-shadow 加粗的实操写法（最小副作用）

如果必须用 text-shadow，以下写法兼顾清晰度与宽度稳定：

strong {
  text-shadow: 
    -1px  0 0 currentColor,
     1px  0 0 currentColor,
     0 -1px 0 currentColor,
     0  1px 0 currentColor;
}

• 四个方向各1px硬边阴影，不模糊，不增加行高
• 避免用 0 0 1px：它在所有方向扩散，实际加粗不均匀且易糊
• 别叠加超过4个阴影：性能下降，且在低配设备上可能触发渲染降级
• 务必配合 transform: translateZ(0) 或 will-change: transform 强制GPU加速，减少闪烁

字体字重映射和渲染细节远比表面复杂，尤其是混合使用Web Font、系统字体、variable font时，font-weight 的表现差异常被忽略。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~