F9y4ng / GreasyFork-Scripts

The open source code of this project is used for userscripts (油猴脚本) for desktop browsers, including Font Rendering (Customized) (字体渲染(自用脚本)- Font Rendering.user.js), and Search Engine Assistant (优雅的搜索引擎助手 - Google & Baidu Switcher.user.js), etc.
https://f9y4ng.github.io/GreasyFork-Scripts/
GNU General Public License v3.0
919 stars 45 forks source link

[发现错误] 自定义等宽字体后,代码块会被设置 text-shadow #310

Closed cuiko closed 6 months ago

cuiko commented 6 months ago

1. 准备工作(确认预先完成的操作)

2. 描述错误信息(清楚而简洁地描述错误)

关闭了字体阴影尺寸后,代码块仍然设置了 text-shadow,导致代码块内字体显示效果就好像加粗了

3. 错误过程再现(请按示例填写行为步骤,直至复现您遇到的问题)

设置了自定义英文等宽字体,例如:CaskaydiaCove Nerd Font Propo 即使关闭了字体阴影尺寸,代码块仍然会设置 text-shadow

4. 屏幕截图(如有屏幕截图,请添加以帮助解释您的问题)

未手动关闭 text-shadow image

手动关闭 text-shadow image

设置 image image

相关 css image image

5. 预期结果(清晰明了地描述您所期待想要什么样的结果)

代码块不设置 text-shadow

6. 客户端信息(请在“冒号”后认真填写您的本地信息)

7. 脚本运行环境排查 (请确认环境条件并填写相关信息)

8. 附加信息(在此处添加您认为有用的其他信息)

F9y4ng commented 6 months ago

等宽字体是渲染样式与非等宽字体的渲染样式是分离的。

在渲染等宽字体时,使用了Blink内核对text-shadow的一个hack方法,即text-shadow: 0 0 0 currentcolor;。以上CSS样式在语法直译上应该不会显示任何阴影效果,在实际浏览器解析中却渲染出阴影效果,这个效果比0.1像素的阴影更锐利一些。但,不同的Blink内核浏览器,如chrome,edge,以及你提到的arc浏览器会有不同的渲染效果。这个效果在低分屏1080P及以下分辨率差异不是特别明显,但在高分屏且应用了缩放后会出现一些视觉差异。

比如,我本地低分屏测试机chrome的效果明显会比你的arc要好,虽然它们都是相同内核:(建议点开看大图)

test

cuiko commented 6 months ago

噢,感谢解惑!