如何修复Chrome浏览器中字体渲染加粗异常问题？

你的代码存在字体权重不匹配的核心问题，这是导致Chrome滚动时字体渲染异常的主要原因：

• @font-face 里声明的 font-weight: normal，和实际引入的Roboto-Bold加粗字体文件不匹配
• 元素样式中用 font: normal 15px/normal Roboto-Bold 强制设置normal权重，浏览器可能会对加粗字体再做一次模拟加粗，最终导致渲染异常

修正方案 #

1. 调整@font-face的字体权重声明 #

把font-weight设为700（对应bold权重），匹配你引入的加粗字体文件：

@font-face {
    font-family: "Roboto";
    font-display: auto;
    font-weight: 700; /* 加粗字体对应的标准权重值 */
    font-style: normal;
    src: url('https://static.mediacdn.vn/tuoitre/web_font/Roboto-Bold.woff2') format('woff2'), 
         url('https://static.mediacdn.vn/tuoitre/web_font/Roboto-Bold.woff') format('woff'), 
         url('https://static.mediacdn.vn/tuoitre/web_font/Roboto-Bold.ttf') format('truetype'), 
         url('https://static.mediacdn.vn/tuoitre/web_font/Roboto-Bold.eot') format('embedded-opentype');
}

注：建议将字体家族名改为通用的"Roboto"，方便后续扩展其他权重的字体（如常规、轻量版）

2. 修正元素样式的字体调用逻辑 #

在.test类中，通过font-weight:700调用加粗字体，不要强制设置normal：

.test {
    color: #222;
    font-family: "Roboto";
    font-size: 15px;
    font-weight: 700; /* 和@font-face声明的权重保持一致 */
    line-height: 18px;
    min-width: 90% !important;
}

也可以简化为：

.test {
    color: #222;
    font: 700 15px/18px "Roboto";
    min-width: 90% !important;
}

3. 修复HTML拼写错误 #

你的HTML代码中claas是拼写错误，需改为class：

<a href="#" title="" class="test">Font error with scroll in chrome!</a>

额外优化（若仍有异常） #

如果修正后滚动时渲染问题还存在，可添加以下CSS属性抑制Chrome的字体渲染优化：

.test {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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