必须为.nav-link、.navbar-brand及SVG图标显式设置backdrop-filter: none以剥离文字模糊，同时清除background-image残留、确保rgba背景及父容器真实背景。
Bootstrap 5 默认启用 backdrop-filter 导致文字被意外模糊
不是字体本身变糊，而是 Bootstrap 5 的 .navbar、.dropdown-menu 等组件在启用毛玻璃效果时，把 backdrop-filter: blur() 直接加在了包含文字的容器上。浏览器不会区分“背景”和“文字”，只要文字在该元素内，就会被一并模糊。
常见现象：.nav-link 文字边缘发虚、SVG 图标变毛、下拉菜单里文字像蒙了一层灰——这都不是抗锯齿问题，是滤镜作用域没切开。
-
.navbar加了backdrop-filter后，必须为.nav-link、.navbar-brand和所有内嵌 SVG 显式设backdrop-filter: none（不能用inherit或留空） - 如果用了自定义图标字体（如 Font Awesome），也要对
i或svg元素加同一规则 - Safari 下尤其明显：即使你没主动写
backdrop-filter，某些 Bootstrap 5.3+ 预编译 CSS 可能已默认启用，需检查 Computed 面板确认
-webkit-font-smoothing 被 Bootstrap 的 UA 样式覆盖
Bootstrap 5 的基础重置（reboot.scss）未声明 -webkit-font-smoothing，但部分浏览器（尤其是 macOS Safari）在遇到未明确设置的渲染策略时，会回退到系统级 auto 模式。深色背景 + 小字号组合下，auto 往往触发 subpixel 渲染降级，文字立刻显灰蒙。
这不是 Bootstrap “写错了”，而是它选择不干预系统默认字体渲染——但实际项目中，这会让文字在高分屏上失去锐度。
立即学习“前端免费学习笔记（深入）”；
- 全局加这一段即可修复：
body, button, input, select, textarea, [role="button"] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - 别只给
body设——button和input有 UA 样式，会覆盖继承链 - iOS Safari 忽略
-moz-osx-font-smoothing，但加了无害；macOS Safari 需要它来稳定灰度渲染
移动端 H5 页面因 transform 触发非整像素渲染
Bootstrap 5 的模态框（.modal）、折叠菜单（.collapse）大量使用 transform: translateY(-50%) 类定位逻辑。当计算结果不是整数像素（比如 -50.3px），Chrome 和 Safari 会强制启用 grayscale 字体渲染，小字号文字立刻发虚。
这种模糊和 backdrop-filter 无关，但常被误判为“Bootstrap 让字体变糊”。
- 修复方式是凑整：
transform: translate(0, calc(-50% + 0.5px))—— 这个+0.5px能让大多数分辨率下最终值趋近整数 - 仅对受
transform影响的容器生效，比如.modal-dialog、.dropdown-menu - 不要用
scale()或rotate()做微调，它们比translate更容易触发亚像素插值
Safari 中 background-image 残留遮挡模糊效果
Bootstrap 5 默认给 .navbar-light 加了浅色渐变图层：background-image: linear-gradient(180deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,0))。这个图层会盖在透明背景之上，导致 backdrop-filter 实际作用对象变成“纯色图层背后”，而非页面真实内容——看起来就像没模糊，或者模糊失效后文字更难读。
这不是 bug，是设计使然；但叠加在字体渲染上，会让模糊感和可读性同时崩坏。
- 必须清除：
.navbar { background-image: none !important; } - 同时确保
background-color是带 alpha 的rgba()，比如rgba(255,255,255,0.1)，不能是transparent（Safari 下可能不触发 backdrop） - 父容器（如
body）要有真实背景（渐变、图片或滚动内容），否则模糊区域一片空白，文字对比度进一步恶化
transform 的 .dropdown-menu，既受 backdrop-filter 继承影响，又被 background-image 遮挡，还因非整像素触发灰度渲染——三重模糊叠在一起，调试时很难一眼定位根因。 
