用stylus插件改善Edge浏览器字体渲染

softowen

因为mactype没法渲染edge浏览器，所以用stylus插件加载自定义的脚本来实现字体渲染的美化，我感觉和mactype+gdi的浏览器渲染效果几乎差不多了，先上效果图：

请勿使用多线程下载工具下载论坛附件！

请勿使用多线程下载工具下载论坛附件！

请勿使用多线程下载工具下载论坛附件！

显示器27寸4k，DPI缩放125%，浏览器缩放110%，字体为去hinting版的微软雅黑。
Edge是最新的，edge://flags里的Enhance text contrast打开。
首先在Edge浏览器，扩展->打开开发人员模式，然后把附件里的stylus.crx拖进去进行安装。
然后打开stylus插件的管理界面，编写新样式，把附件里的style.txt复制粘贴进去，这个脚本是之前网上下载的然后各种拼凑的，在提升字体渲染的同时，也强制指定网页字体为微软雅黑，如果不喜欢强制字体指定，也可以自己改造一下，把后面的字体部分删了，或者把微软雅黑替换成鸿蒙字体都可以的。
脚本里最核心的一句是：-webkit-text-stroke-width: calc(calc(40px - 1em) / 100);
这里的/100是根据自己的喜好调节的粗细度，可以自行调节，比如/80会更粗，/150会细一些。
edge stylus.zip (1.77 MB, 下载次数: 150)

2022-4-18 18:12 上传

下载次数: 150
下载积分: PB币 -1
请勿使用多线程下载工具下载论坛附件！

情缘

效果都不理想，索性直接更换字体反正也能看过去 习惯就好

世纪

字体锐利度稍差点。

世纪

我的代码：
/*>>>強制修改網頁字體<<<*/
/*該代碼運行于CHROME_v72 & FIREFOX_v65 的STYLUS_v1.5.2擴展之上*/
/*很多網頁用瀏覽器的設置字體功能無法生效,而這個CSS可以解決這些問題.*/

*:not([class*="icon"]):not([class*="button"]):not([class*=mjx]):not([class*=fa]):not(i) { /*使修改字體不會應用於部分特殊字符符號和圖標以及按鈕等網頁元素,完美解決字符集不全導致圖標,按鈕變方塊的問題.*/
    /*font-weight: 500!important; /*字體粗細,整百數字*/
    font-family: "微软雅黑" !important;   /*字體設置,可分別設置中英文,前面英文字體,後面中文字體*/
    /*color: #8b8b8b00 !important;    /*更改字體顏色及透明度(注意:這是全局修改),如無需要,可直接注釋掉整行代碼.*/
    text-shadow: 0.01em 0.01em 0.01em #000 !important;   /*更改字體陰影及透明度,可修改數值實現不同的效果.*/
    /*十六進制顏色代碼前的方塊可點擊,用可視化UI更改顏色與透明度.*/
}

请勿使用多线程下载工具下载论坛附件！

slxjyj

感谢楼主，试用了！

xfeiyun

现在dev的win11，显示效果不错。

kimifetch

我之前在Edge上用Stylus改字体后遇到个问题，就是会使页面的自动刷新跳转失效。

世纪

请勿使用多线程下载工具下载论坛附件！

这两天又找了一个插件，觉得还行，喜欢的可以试一下：
.console-output {
        font-family: 'JetBrains Mono Regular', 'Cascadia Code' !important;
        font-size: 15px;
}
span {
        font-family: 'JetBrains Mono Regular', 'Cascadia Code', 'Microsoft YaHei UI semibold';
}
pre,
div,
body,
code,
input,
td,
font,
a,
li {
        font-family: 'FontAwesome','Source Emoji', 'JetBrains Mono Regular', 'Microsoft YaHei UI semibold' !important;
}

aeeaoo

感觉还是Font Rendering脚本更好用，

请勿使用多线程下载工具下载论坛附件！

请勿使用多线程下载工具下载论坛附件！

chris88

感谢分享！！

yeyo

油猴+字体渲染脚本即可。

请勿使用多线程下载工具下载论坛附件！

qiantua

启用实验室功能（提高字体渲染）效果

开启方法： 在地址栏输入edge://flags
搜索以下三条：
enhance text contrast（提高字体渲染）
Windows style overlay scrollbars（细滚动条）
enable windows 11 visual updates（win11视觉效果）
设置成enable

世纪

qiantua 发表于 2022-4-23 10:26
启用实验室功能（提高字体渲染）效果

开启方法： 在地址栏输入edge://flags

请勿使用多线程下载工具下载论坛附件！

只打开这个，不开stylus的效果。

gaozhe3321

吓我一跳。我以为前端的stylus语法有啥变化呢