这个问题我之前折腾装饰性字体的时候也碰到过，尤其像你用的Lobster这种手写风格字体，Chrome的渲染策略刚好踩中了rgba和opacity的机制差异，才导致了这种奇怪的效果。

核心原因拆解： #

• rgba只作用于文字颜色通道：当你用color: rgba(255,255,255,.3)时，只是给文字的基础色加了透明度，但Chrome为了让这类复杂字体显示更清晰，会自动生成多个重叠的半透明抗锯齿图层（比如子像素渲染的辅助层）。这些辅助图层的颜色并没有被rgba调整，叠加后就会出现局部颜色偏深、看起来像字母重叠的异常——相当于多个半透明层叠在一起，局部透明度反而变低了。
• opacity是对元素的全局处理：而opacity: .3是把整个div元素（包括文字本身、所有抗锯齿图层、元素的所有视觉部分）的透明度统一降低。所有图层都按比例调暗，叠加后的效果是均匀的半透明，自然不会出现局部重叠的问题。

结合你的代码来看： #

<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
<style>
body{ 
  font-family: Lobster; 
  background: black; 
} 
div{ 
  font-size: 100px; 
} 
div:hover{ 
  color: #fff; 
  opacity: 1; 
} 
.alpha{ 
  color: rgba(255, 255, 255, .3); 
} 
.opac{ 
  color: #fff; 
  opacity: .3; 
}
</style>
<div class="alpha">Toshio Bando</div>
<div class="opac">Toshio Bando</div>

在Chrome里，.alpha的文字会因为多重抗锯齿图层的叠加，出现局部颜色偏深的“重叠”感；而.opac的文字因为整体透明度被统一控制，显示出来是均匀的半透明效果，符合预期。

可行的解决办法： #

如果需要单独控制文字透明度（不影响元素其他部分），可以试试这些方案：

• 给文字添加font-synthesis: none;，关闭Chrome的字体合成优化，不过可能会丢失字体的一些合成细节（比如自动生成的粗体、斜体）；
• 用text-shadow模拟半透明：text-shadow: 0 0 0 rgba(255,255,255,.3); color: transparent;，但这种方法对复杂字体的渲染自然度可能不如原生颜色设置；
• 如果不需要单独控制元素其他部分的透明度，直接用opacity是最省心的方案。

内容的提问来源于stack exchange，提问作者Anurag Srivastava