prefers-contrast 媒体查询不能自动调整 font-weight，js 动态修改在高对比模式下失效，因系统接管渲染并忽略运行时样式；真正起效的字重必须写死在 css 中，且依赖字体是否提供对应字重。
prefers-contrast 媒体查询**不能用来自动调整字重（font-weight）**，试图用它触发 font-weight: bold 是无效的，且会损害可访问性。
为什么 JS 动态改 font-weight 在高对比模式下失效
有人监听 window.matchMedia('(prefers-contrast: high)') 后执行 element.style.fontWeight = 'bold'，结果文字没变粗，甚至模糊、重影。这是因为：
- 系统高对比模式（如 Windows 高对比主题）已接管文本渲染管线，浏览器会忽略 JS 对
font-weight的运行时修改 - 强行加粗可能破坏字体 hinting，尤其在小字号下导致边缘发虚或锯齿
- 该行为违反 WCAG 1.4.12 文本外观要求：用户代理应尊重系统级文本呈现策略，而非覆盖它
真正起效的字重控制必须写死在 CSS 里
只有在 CSS 规则中直接声明的 font-weight 才可能被系统识别并参与渲染。但注意：
-
@media (prefers-contrast: high)中设置font-weight: 700不等于“加粗”，而是告诉浏览器：“在此模式下，请用这个字重渲染” - 它不会动态拉伸字体轮廓，只是选用字体文件中已有的 weight 轴值（如 Roboto 的 400/500/700）
- 若字体未提供对应字重（例如只加载了 400），浏览器会 fallback 到最接近可用值，效果不可控
更可靠的可读性提升手段是换字体族 + 改字号
比起纠结字重，高对比模式下优先保障可读性的实操路径是：
- 用无衬线系统字体栈：
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif - 增大基础字号：
font-size: clamp(1rem, 0.95vw + 0.8rem, 1.125rem)（避免过小导致辨识困难） - 禁用所有
text-shadow和backdrop-filter（高对比模式下会被强制清除或渲染异常） - 用
font-synthesis: none防止浏览器自动合成粗体（避免模糊）
forced-colors 模式下 font-weight 完全不可控
当系统真正进入强制配色状态（@media (forced-colors: active)），font-weight 声明仍有效，但：
- 其视觉表现由系统字体引擎决定，与 CSS 值无严格映射关系
- 某些系统（如 Windows 高对比主题“黑色背景白字”）会统一使用等宽/无衬线默认字体，无视你指定的 font-family
- 此时唯一能确定生效的是
font-size和line-height—— 它们直接影响可读性底线
复杂点在于：你写的 font-weight 可能在 prefers-contrast: high 下生效，在 forced-colors: active 下被弱化，在低分辨率屏上又因 subpixel 渲染丢失细节。真正值得投入精力的，是确保字号、行高、字间距和颜色对比这四条基本线始终达标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
