火狐开启硬件加速后字体变细发虚,是因WebRender绕过CSS抗锯齿控制;需确认about:support中“合成器”为WebRender,再禁用gfx.webrender.subpixel-antialiasing.enabled并设gfx.font_rendering.cleartype_params.rendering_mode为1,重设中文字体为微软雅黑,最后应用text-rendering: optimizeLegibility和-moz-osx-font-smoothing: grayscale。
火狐浏览器开启硬件加速后,网页字体突然变细、发虚、边缘泛灰,原本通过CSS设置的抗锯齿效果全部消失,这是因为WebRender渲染引擎接管后彻底绕过了传统字体平滑控制路径,必须切换到系统级渲染策略才能恢复清晰度。
在地址栏输入 about:support 并回车→向下滚动至“图形”区域→查看“合成器”一行右侧显示内容。若显示为“WebRender”,说明硬件加速已生效且字体模糊问题根源在此;若仍为“OpenGL”或“Basic”,则后续所有操作均无效,需先完成硬件加速启用流程。
注意:仅当“合成器”明确显示WebRender时,本方案才适用;否则请先返回常规设置启用硬件加速并重启浏览器。
在地址栏输入 about:config 并回车→点击“接受风险并继续”→在搜索框中依次输入并双击修改以下两项:
gfx.webrender.subpixel-antialiasing.enabled → 设为 false
gfx.font_rendering.cleartype_params.rendering_mode → 设为 1(对应灰度抗锯齿模式)
这两项修改直接关闭WebRender对LCD子像素的主动干预,迫使字体回归系统级灰度渲染路径,是解决开启硬件加速后CSS抗锯齿失效的核心开关。不改这两项,任何CSS声明都无效。
第一步:打开 about:preferences#general → 滚动至“语言和外观”→点击“高级”按钮。
第二步:在“字体”设置窗口中,将“简体中文”对应的“字体”下拉菜单选为微软雅黑(非“微软正黑体”或“SimSun”)。
第三步:勾选“允许页面选择自己的字体,除非被自定义字体覆盖”下方的“始终使用以下字体大小”复选框,并将“比例”设为100%。
第四步:关闭窗口,重启Firefox。这一步确保中文字体加载真实字重(400),避免因字体回退导致font-weight声明失效,从而让后续CSS text-rendering生效。
方法一:在全局样式表开头插入以下代码(无需加!important):
body { text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; }
方法二:针对标题等关键文本,单独添加更精准控制:
.headline, .nav-link { font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
Firefox仅识别 -moz-osx-font-smoothing,且只在macOS系统下生效;Windows用户跳过此项,依赖前一步的系统字体重设即可。不要在body上写font-smooth或-webkit-font-smoothing: subpixel-antialiased——这两项在WebRender下已被忽略。