会,text-shadow模拟加粗因软边阴影导致文字模糊,尤其小字号或Retina屏;需设blur-radius为0,用多方向1px硬边阴影(如-1px 0 0, 1px 0 0等)并启用GPU加速。

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:把文字转成<text>,设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加速,减少闪烁
font-weight 的表现差异常被忽略。


















