CSS字体抗锯齿为何生成新颜色？Vuetify与Quasar渲染差异排查

差异原因 #

• 字体文件细节差异：虽然Vuetify和Quasar都预装Roboto，但二者引入的字体可能存在版本、子集、hinting（字体微调）参数的区别。Chrome会根据字体文件本身的特性自动选择抗锯齿策略，即使CSS属性一致，不同的字体文件也会触发不同的渲染模式。
• 框架隐式样式影响：部分框架会通过@font-face的附加属性（如font-display、字体特性开关）或全局CSS变量间接影响渲染逻辑，这些隐式设置可能不会直接显示在浏览器的Computed面板中。
• Chrome内部渲染优先级：Chrome会结合系统字体平滑设置（如Windows ClearType、macOS字体平滑）和字体质量自动切换抗锯齿模式，当字体hinting质量不足时，可能默认启用彩色子像素抗锯齿。

解决方法 #

• 统一字体文件：放弃框架预装的Roboto，自行引入完全相同版本的Roboto字体，通过自定义@font-face声明确保两段文本使用同一字体文件。
• 强制灰度抗锯齿：添加Chrome支持的非标准属性覆盖默认行为：

.target-text {
  -webkit-font-smoothing: grayscale !important;
  font-smooth: grayscale !important;
}

• 调整字体渲染特性：关闭可能影响抗锯齿的字体特性，减少渲染复杂度：

.target-text {
  font-feature-settings: "kern" 0;
  font-variant-ligatures: none;
}

• 检查框架全局样式：排查Quasar全局样式中是否存在-webkit-font-smoothing: subpixel-antialiased这类设置，若有则针对目标文本用!important强制覆盖。

抗锯齿效果对比图：左侧Vuetify文本呈现灰度抗锯齿效果，右侧Quasar文本带有彩色边缘；计算后CSS属性图：两段文本的浏览器Computed CSS属性完全一致。

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