论 Chrome 浏览器任意网页同时使用衬线字体和纸墨模式

前几天在奔跑中的奶酪网站里发现了衬线字体和纸墨模式的小书签，根据网站文章也安装了 font rendering enhancer 插件实现了和 firefox 一样的字体渲染效果，但奈何每次需要主动点击两个小书签才可实现衬线字体和纸墨模式的使用效果，想着如何让所有网页一直自动使用衬线字体和纸墨模式。于是联系上奔跑中的奶酪，他非常乐于助人，告诉我如何利用他网站里所给的油猴中的护眼模式小插件来实现，在此非常感激他，有需要的自行在下面取用，纸墨模式和衬线字体自己感觉看起来非常优雅又护眼。

下面是使用效果：






设置方式：
可先进入文章网页看看介绍https://www.runningcheese.com/web-viewing
然后关注奔跑中的奶酪公众号根据提示下载小书签，小书签可作为手动为自己想用的网页实现效果的选项，本文不为推广，只是觉得站长人很好乐于助人，且该方法是从他那来的，所以不直接给出小书签下载链接，而是让你们自己了解一下看效果。

任意网页自动实现纸墨模式和衬线字体

首先chrome默认字体设置为如下所示


接着安装护眼模式插件，油猴插件护眼模式链接：https://greasyfork.org/zh-CN/scripts/456902
然后复制以下代码将护眼模式插件代码全部覆盖掉保存就可实现

1. // ==UserScript==
   
2. // @name            护眼模式
   
3. // @name:zh-CN      护眼模式
   
4. // @name:en         EyesCareMode
   
5. // @version         0.1
   
6. // @description     简单的护眼模式，减低 10% 的亮度
   
7. // @description:en  Easy EyesCare Mode, Reduce luminance for 10%
   
8. // @author          RunningCheese
   
9. // @namespace       https://www.runningcheese.com
   
10. // @license         MIT
    
11. // @match           *://*/*
    
12. // @icon            data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M12 21q-1.65 0-2.825-1.175Q8 18.65 8 17H5q-.825 0-1.413-.587Q3 15.825 3 15q0-3.5 2.3-6.037Q7.6 6.425 11 6.05V3h2v3.05q3.4.375 5.7 2.913Q21 11.5 21 15q0 .825-.587 1.413Q19.825 17 19 17h-3q0 1.65-1.175 2.825Q13.65 21 12 21Zm-7-6h14q0-2.9-2.05-4.95Q14.9 8 12 8q-2.9 0-4.95 2.05Q5 12.1 5 15Zm7 4q.825 0 1.413-.587Q14 17.825 14 17h-4q0 .825.588 1.413Q11.175 19 12 19Zm0-2Z"%2F%3E%3C%2Fsvg%3E
    
13. // ==/UserScript==
    
14. 
    
15.     (function() {
    
16.     var s = (document.getElementsByTagName('head')[0] || document.body).appendChild(document.createElement('style'));
    
17.     var t = document.createTextNode('p, div, font, blockquote { font-family: "PT Serif", Georgia, serif !important; }');
    
18.     s.appendChild(t);
    
19. })();
    
20. 
    
21.     (function() {
    
22.     function getRGBColor(node, prop) {
    
23.         var rgb = getComputedStyle(node, null).getPropertyValue(prop);
    
24.         var r, g, b;
    
25.         if (/rgb\((\d+),\s(\d+),\s(\d+)\)/.exec(rgb)) {
    
26.             r = parseInt(RegExp.$1, 10);
    
27.             g = parseInt(RegExp.$2, 10);
    
28.             b = parseInt(RegExp.$3, 10);
    
29.             return [r / 255, g / 255, b / 255];
    
30.         }
    
31.         return rgb;
    
32.     }
    
33.     R(document.documentElement);
    
34. 
    
35.     function R(n) {
    
36.         var i, x, color;
    
37.         if (n.nodeType == Node.ELEMENT_NODE && n.tagName.toLowerCase() != 'input' && n.tagName.toLowerCase() != 'select' && n.tagName.toLowerCase != 'textarea') {
    
38.             for (i = 0; x = n.childNodes[i]; ++i) R(x);
    
39.             color = getRGBColor(n, 'background-color');
    
40.             if ((typeof(color) != 'string' && color[0] + color[1] + color[2] >= 1) || (n == document.documentElement && color == 'transparent')) {
    
41.                 n.style.backgroundColor = '#EDEBE8';
    
42.                 n.style.setProperty('background-color', '#EDEBE8', 'important');
    
43.             }
    
44.         }
    
45.     }
    
46. })();

复制代码

这个可以啊

上面的效果图偏黄是因为我开了护眼软件，没开护眼软件的纸墨模式是这样的      
                              


加上护眼软件就更舒适了

单纯修改外观建议用stylus

shell32 发表于 2023-2-15 09:02
单纯修改外观建议用stylus

转换一下?