文字发虚是backdrop-filter误作用于文字所致，需对.nav-link、.navbar-brand、svg等显式设backdrop-filter:none；下拉菜单需设rgba背景色并指定文字色；渐变背景应移至伪元素或父容器，blur值建议8–12px。
文字在渐变背景上发虚是 backdrop-filter 误作用于文字本身
不是字体设置问题，而是你给 .navbar 加了 backdrop-filter: blur(12px)，结果整个导航栏（含 .nav-link、.navbar-brand）都被模糊了。浏览器不会区分“背景”和“文字”，只要它们在同一个渲染层里，就一起糊。
必须切断文字继承模糊效果：
-
.navbar-glass .nav-link、.navbar-glass .navbar-brand必须显式写backdrop-filter: none—— 用inherit或留空都不行 - 如果用了 SVG 图标（比如 hamburger 或 logo），也要加同一规则：
.navbar-glass svg { backdrop-filter: none; } - 别依赖 Bootstrap 默认类（如
bg-light）控制背景，它们自带background-color: #fff，会直接盖掉模糊层
小屏下拉菜单文字看不清，根源不在导航栏
.dropdown-menu 是独立浮层，不继承 .navbar 的任何背景或滤镜。它默认是纯白背景（background-color: #fff），在半透明导航栏下展开时，页面内容会透过它“印”上来，文字就像叠在杂图上。
解决方案是给下拉菜单单独设可控背景：
-
.navbar-glass .dropdown-menu必须设background-color: rgba(255, 255, 255, 0.95) !important—— 不要用transparent，否则文字直接透底 -
.dropdown-menu .dropdown-item显式设文字色：color: #212529，别靠继承 - 移动端折叠区（
.navbar-collapse）同样要兜底：@media (max-width: 991.98px) { .navbar-glass .navbar-collapse { background-color: rgba(255, 255, 255, 0.92); } }
Safari 下文字灰蒙蒙，不是 CSS 能调的
macOS Safari 对子像素抗锯齿特别敏感。一旦启用 backdrop-filter，系统可能自动降级字体渲染，导致文字失去锐度——这不是颜色、阴影或 font-smoothing 能修的。
绕过方式只有一条：避免让文字处于被模糊的祖先元素内。所以 backdrop-filter: none 在子元素上不是可选项，是硬性要求。哪怕你把颜色、阴影、对比度全调对了，只要漏掉这一条，Safari 上的文字边缘就注定发虚。
渐变背景本身加剧文字不可读
如果你用的是 background: linear-gradient(...) 直接盖在 .navbar 上，那 backdrop-filter 根本没生效对象——它只模糊“背后”的内容，不模糊自己身上的渐变。
正确做法是：
- 清掉所有
background-image：background-image: none !important - 用伪元素承载真实背景图（如有）：
.navbar-glass::before+z-index: -1 - 文字层（
.nav-link等）保持position: relative和backdrop-filter: none - 渐变若必须存在，应作为 body 或主容器背景，而非 navbar 自身
backdrop-filter: none 也救不回清晰度。建议始终控制在 8–12px 区间。
