如何阻止input聚焦时文本变细？深色背景下的表单文本异常

问题现象 #

当<input>元素聚焦时，文本会出现变细的异常，该情况仅在深色背景（如纯黑）搭配特定文本颜色时触发，更换字体或设置font-weight无法解决。

代码复现 #

<body style="background-color: black">
  <input type="text" />
  <span style="color: blue">TESTANDO</span>
</body>

效果对比 #

• 无聚焦状态：
  
• 聚焦状态：
  

解决方案 #

该问题是浏览器亚像素渲染优化在特定色彩组合下的异常表现，可通过以下方式修复：

1. 统一字体渲染规则

给<input>添加CSS，强制使用无亚像素的渲染方式：

input {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

针对Windows系统的Chrome，也可通过细微描边抵消渲染偏差：

input {
  -webkit-text-stroke: 0.3px;
}

2. 用文本阴影修正渲染

通过添加透明文本阴影，干扰浏览器的异常渲染逻辑：

input:focus {
  text-shadow: 0 0 0 rgba(255,255,255,0.01);
}

3. 微调色彩对比度

若场景允许，微调背景色或文本色的亮度（比如把纯黑背景改为#0a0a0a，文本蓝调整为#4488ff），避免触发浏览器的异常渲染判定。

内容的提问来源于stack exchange，提问作者Ramon Ribeiro