Windows平台Chrome伪粗体字体随尺寸出现异常轮廓问题

上方为Windows系统Chrome效果

上方为Firefox效果
问题现象
该问题仅在特定字号和字符下出现:当所用字体无原生粗体字重,但样式中声明了粗体时,Firefox中所有字符的伪粗体(faux-bold)显示正常,但Windows平台的Chrome浏览器(版本109.0.5414.75)会出现异常。即使仅调整微小像素的字号,异常也会随机出现或消失。
复现代码
<style> body { line-height: 1.6; font-size: 16px; color: #212529; font-family:sans-serif; font-weight:400; } .ct-text-block { font-family:"Average"; color: #000; font-weight: 700; margin-top: .75em; margin-bottom: .5px; font-size: 1em; /*change the above to font-size:1.01em to fix the issue*/ } .larger{ font-size:16.5px } </style> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Average&display=swap" rel="stylesheet"> <body> <p>This seems to only happen at certain sizes, in this case 16px, and letters (K & R) when the font in question does not have a supplied "bold" weight but one is declared in the styles. This "faux" bold is fine for all characters in Firefox, but not in Chrome (as of 109.0.5414.75) on Windows. </p> <div id="text_block-13-57265" class="ct-text-block"> <span id="span-14-57265" class="ct-span">Here are Faux Bold characters at 16px:AAA BBB CCC DDD EEE FFF GGGG HHHH III JJJ KK LLL MMM NN OOO PPP QQQ RRR SSS TTT UUU VVV WWW XXX YYY ZZZ</span> </div> <div id="text_block-13-57265" class="ct-text-block larger"> <span id="span-14-57265" class="ct-span">Here are Faux Bold characters at 16.5px:AAA BBB CCC DDD EEE FFF GGGG HHHH III JJJ KK LLL MMM NN OOO PPP QQQ RRR SSS TTT UUU VVV WWW XXX YYY ZZZ</span> </div> <div style="font-size:2em" id="text_block-13-57265" class="ct-text-block"> <span id="span-14-57265" class="ct-span">2em (32px): KK RRR</span> </div> <div style="font-size:34px" id="text_block-13-57265" class="ct-text-block"> <span id="span-14-57265" class="ct-span">34px: KK RRR</span> </div> <div style="font-size:5em" id="text_block-13-57265" class="ct-text-block"> <span id="span-14-57265" class="ct-span">5em (80px): KK RRR</span> </div> <div style="font-size:90px" id="text_block-13-57265" class="ct-text-block"> <span id="span-14-57265" class="ct-span">90px: KK RRR</span> </div> </body>
补充说明
- 所用字体未本地安装,问题已在多台Win10和Win11设备上复现,并非单台设备独有。
- Mac平台下无论使用何种浏览器,均未出现该问题。
需求期望
希望字体在不同字符间的渲染保持一致,哪怕伪粗体的效果不够理想。伪粗体本身可能存在固有问题,但部分字符正常、部分字符随字号变化出现异常的情况过于怪异。
内容的提问来源于stack exchange,提问作者hrood
相关产品推荐
相关产品推荐

