Chrome文本渲染故障求助：尝试多种方案仍未彻底解决

问题概述 #

Chrome浏览器出现文本渲染异常，鼠标悬停目标元素时故障消失。已尝试调整-webkit-font-smoothing、text-rendering所有取值，最终保留配置：

-webkit-font-smoothing: subpixel-antialiased;
text-rendering: geometricPrecision;

该配置仅能改善问题，无法彻底解决。开启硬件加速后情况好转，但同样未根治。

故障示例：

当前使用的Inter 900字重字体导入配置：

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: local(''),
  url('../fonts/inter-v12-latin-900.woff2') format('woff2'),
  url('../fonts/inter-v12-latin-900.woff') format('woff'),
  url('../fonts/inter-v12-latin-900.ttf') format('truetype'),
  url('../fonts/inter-v12-latin-900.eot?#iefix') format('eot'),
  url('../fonts/inter-v12-latin-900.svg#Inter') format('svg');
}

可行解决方案 #

1. 优化字体加载配置 #

• 移除local('')，避免Chrome优先加载系统本地可能存在的不兼容Inter字体版本：

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/inter-v12-latin-900.woff2') format('woff2'),
       url('../fonts/inter-v12-latin-900.woff') format('woff'),
       url('../fonts/inter-v12-latin-900.ttf') format('truetype');
}

• 添加font-display: swap，确保字体加载过程中不会出现布局偏移或渲染异常：

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/inter-v12-latin-900.woff2') format('woff2'),
       url('../fonts/inter-v12-latin-900.woff') format('woff'),
       url('../fonts/inter-v12-latin-900.ttf') format('truetype');
  font-display: swap;
}

• 移除EOT、SVG格式声明，现代Chrome无需支持这类老旧字体格式。

2. 强制触发元素重绘 #

针对悬停时故障消失的特性，给目标元素添加微小动画强制Chrome持续重绘：

.target-element {
  animation: force-redraw 0.1s infinite;
}

@keyframes force-redraw {
  0% { transform: translateZ(0); }
  100% { transform: translateZ(0); }
}

也可通过添加空伪元素触发重绘：

.target-element::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  visibility: hidden;
}

3. 调整Chrome渲染相关CSS属性 #

添加以下属性禁用可能导致异常的渲染优化：

.target-element {
  will-change: transform;
  backface-visibility: hidden;
}

若硬件加速效果不佳，可强制触发GPU渲染：

.target-element {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

4. 检查并替换字体文件 #

确认Inter字体文件未损坏，重新从官方渠道下载最新版本的900字重字体，替换现有文件。

5. 调整Chrome浏览器设置 #

• 关闭硬件加速：进入Chrome设置 → 高级 → 系统，取消勾选"使用硬件加速模式（如果可用）"，重启浏览器测试。
• 重置浏览器设置：进入Chrome设置 → 高级 → 重置并清理 → 恢复原始默认设置，排除配置冲突问题。

内容的提问来源于stack exchange，提问作者zero nero