CSS如何实现文字加粗而不改变宽度_利用text-shadow模拟加粗

会text-shadow模拟加粗因软边阴影导致文字模糊尤其小字号或Retina屏需设blur-radius为0用多方向1px硬边阴影如-1px 0 0, 1px 0 0等并启用GPU加速。text-shadow模拟加粗会导致文字模糊会尤其在小字号或Retina屏上明显。本质是用多个偏移的阴影叠加“撑开”笔画但阴影是软边不是矢量加粗边缘必然发虚。只对 font-weight: normal 且无原生加粗支持的字体有效比如某些自定义Web Fonttext-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或插值模拟。 Ideogram Ideogram是一个全新的文本转图像AI绘画生成平台擅长于生成带有文本的图像如LOGO上的字母、数字等。