V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
alexapollo
V2EX  ›  程序员

Stylish:写了个全网替换字体为微软雅黑/Consolas 的 CSS,浑身舒畅

  •  
  •   alexapollo ·
    geekan · 2015-06-26 16:01:25 +08:00 · 27210 次点击
    这是一个创建于 3423 天前的主题,其中的信息可能已经有所发展或是发生改变。

    全网替换字体,中文替换为微软雅黑,英文替换为Consolas。
    不包括部分使用font图的网站,不包括部分样式需要定制的网站。

    https://userstyles.org/styles/115633/alexapollo-consolas

    装了Stylish就可以使用它。CSS非常简单,就一行,想玩的可以自己拿去定制下。

    第 1 条附言  ·  2015-06-30 11:34:33 +08:00
    新CSS出炉了:
    https://userstyles.org/styles/115780/alexapollo-consolas

    基于 Daniel65536 的 gist 修改。
    中文统一微软雅黑,英文统一Consolas。
    注1:只识别常见字体,不常见字体不会替换。
    注2:google中字体arial和gist中首字母大写的Arial不匹配 @Daniel65536 看下?
    42 条回复    2018-02-05 20:27:07 +08:00
    alexapollo
        1
    alexapollo  
    OP
       2015-06-26 16:05:52 +08:00
    不知道这个分享放到哪个TAB里比较合适。
    主要解决了自己看各类docs被各类难看字体烦到不行的问题。
    nasta
        2
    nasta  
       2015-06-26 16:10:28 +08:00
    你应该在Windows节点发...
    cylin
        3
    cylin  
       2015-06-26 16:12:37 +08:00
    属于分享创造吧 /go/create
    lingyired
        4
    lingyired  
       2015-06-26 16:13:28 +08:00
    font icon 怎么办
    alexapollo
        5
    alexapollo  
    OP
       2015-06-26 16:33:29 +08:00
    @lingyired 就是这个比较头疼,正在想方法,有好主意吗?
    alexapollo
        6
    alexapollo  
    OP
       2015-06-26 16:34:23 +08:00
    @nasta 其实也可以加上兰亭黑文泉译什么的~
    FrankFang128
        7
    FrankFang128  
       2015-06-26 16:36:59 +08:00
    只改 body 比较好吧
    tanete
        8
    tanete  
       2015-06-26 16:37:57 +08:00
    试用了,感觉还不错。继续关注!
    crs0910
        9
    crs0910  
       2015-06-26 16:42:09 +08:00
    @alexapollo 还是搞一个白名单,只换掉常见的字体
    lilydjwg
        10
    lilydjwg  
       2015-06-26 16:43:15 +08:00
    有没有想要全网禁用微软雅黑、微软正黑体、文泉驿微米黑、细明体、新细明体的?
    Daniel65536
        11
    Daniel65536  
       2015-06-26 16:44:17 +08:00   ❤️ 8
    这是作死,而且技术太落后了。

    给你展示下我这种技术先进的解决方案:

    body {
    -webkit-font-smoothing: subpixel-antialiased !important;
    font-family: 'PingFang SC';
    }
    @font-face {
    font-family: 'Arial';
    unicode-range: U+2E80-FFFF;
    src: local('PingFang SC');
    }
    @font-face {
    font-family: '宋体';
    unicode-range: U+2E80-FFFF;
    src: local('PingFang SC');
    }
    @font-face {
    font-family: '宋体';
    unicode-range: U+0000-2E7F;
    src: local('Helvetica Neue');
    }
    @font-face {
    font-family: 'monospace';
    unicode-range: U+2E80-FFFF;
    src: local('PingFang SC');
    }
    @font-face {
    font-family: 'monospace';
    unicode-range: U+0000-2E7F;
    src: local('Essential PragmataPro');
    }
    pre,
    code {
    font-family: 'Essential PragmataPro' !important;
    }

    上面省略了很多内容,只是展示罢了,完整源代码:
    https://gist.github.com/blackgear/d6981d468d6c3191593b
    编译选项:stylus userstyle.styl -c
    alexapollo
        12
    alexapollo  
    OP
       2015-06-26 16:49:41 +08:00
    @Daniel65536 我就喜欢能炸出潜水的尖端码农
    lingyired
        13
    lingyired  
       2015-06-26 17:01:00 +08:00
    @alexapollo

    *:not(*:before)

    似乎不起作用,只用 CSS 的话,我也没啥好办法了。

    如果你适配的站点比较少的话,那么就针对这些站点的 fonticon 做适配吧。。 (比如有使用 fontawesome 的话,就可以直接针对 .fa 做修改)

    @Daniel65536 的方法太赞了
    nasta
        14
    nasta  
       2015-06-26 17:32:45 +08:00
    @alexapollo 哈哈,这个可以有
    yangg
        15
    yangg  
       2015-06-26 17:37:08 +08:00
    @Daniel65536 我之前也想到过这种方案,不过如果真的实行的话,每天看一种字体 不疲劳?
    vali16
        16
    vali16  
       2015-06-26 19:12:17 +08:00 via Android
    不错
    Daniel65536
        17
    Daniel65536  
       2015-06-26 19:36:31 +08:00
    @yangg 每天看一种字体为啥会疲劳?我觉得看宋体更加让我疲劳…

    当然,上面没写清楚,我那个css没有把英文字体统一成一种,所以英文还是各种各样的,不过中文还是老老实实只用最好的一个比较好。毕竟好的中文字体太少了。
    把等宽字体统一成一种的理由很简单,PragmataPro是我眼中最漂亮的等宽字体,而且我花钱买了+_+
    linux40
        18
    linux40  
       2015-06-26 19:44:39 +08:00
    linux大法好
    momo5269
        19
    momo5269  
       2015-06-26 20:40:10 +08:00
    雅黑看久了会累死人的 = =
    bugmenott
        20
    bugmenott  
       2015-06-26 21:20:01 +08:00
    @Daniel65536 看着很舒适
    xieaoran
        21
    xieaoran  
       2015-06-26 21:25:37 +08:00 via Android
    不能直接
    body{
    font-family: *** !important;
    }
    啊......
    ladit
        22
    ladit  
       2015-06-26 21:37:19 +08:00 via iPhone
    ls25145
        23
    ls25145  
       2015-06-27 12:17:21 +08:00
    装个MacType省事
    nyanyh
        24
    nyanyh  
       2015-06-27 19:06:10 +08:00
    @ladit 在用这个帖子的方法时,在Chrome下有没有发现远景论坛(bbs.pcbeta.com)的字体无法替换?
    我这里总会自动强制雅黑,无法设置别的字体
    ladit
        25
    ladit  
       2015-06-27 20:30:37 +08:00 via iPhone
    @nyanyh 检查配置是否正确:stylish,chrome(在chrome://flags下打开(关闭?不太记得了)cleartype),一般加上mactype,还有chrome的设置里的字体也要改,上述帖子的配置需要按个人情况配置,并且在stylish中删除第8行代码。
    nyanyh
        26
    nyanyh  
       2015-06-27 21:35:57 +08:00
    @ladit 这个页面在我这不论怎么修改配置,刚打开页面时强制字体是生效的,但1秒左右又回变回雅黑,其他网页没遇到这个问题
    nyanyh
        27
    nyanyh  
       2015-06-27 21:41:03 +08:00
    @nyanyh 而且用Custom.css,同样的代码是可以强制设置字体的。估计应该是Discuz!本身的css覆盖了Stylish的设置
    ladit
        28
    ladit  
       2015-06-27 23:26:26 +08:00 via iPhone
    @nyanyh 是自动变回?没有刷新应该不会吧?stylish应该是强制覆盖所有吧。另外还可以看看是否有拓展冲突。
    nyanyh
        29
    nyanyh  
       2015-06-28 11:55:32 +08:00
    @ladit 确实是自动变回,新建配置文件也一样,打开后是设置好的字体,过一会就变成雅黑
    现在发现在http://cdn.pcbeta.css.inimc.com//data/cache/style_6_common.css中设置了字体,但是不知道怎么屏蔽它,直接过滤这个css会导致网页丢失格式
    Yamade
        30
    Yamade  
       2015-06-28 18:46:38 +08:00
    感谢,貌似 google搜索结果没变
    ladit
        31
    ladit  
       2015-06-29 10:50:13 +08:00
    @nyanyh 0.0那就不管这个咯。。如果不常上的话。。或者向pcbeta反馈下看看?
    alexapollo
        32
    alexapollo  
    OP
       2015-06-30 11:36:08 +08:00
    其实还是有一些问题的,比如V站上的登出按钮就换行了
    alexapollo
        33
    alexapollo  
    OP
       2015-06-30 11:40:20 +08:00
    @Daniel65536 看APPEND~
    Daniel65536
        34
    Daniel65536  
       2015-07-01 00:02:12 +08:00
    civilians
        35
    civilians  
       2015-09-25 20:37:56 +08:00
    google 搜索界面没有变...
    fetich
        36
    fetich  
       2016-03-29 00:20:25 +08:00
    @Daniel65536
    可不可以将宋体部分的代码改为
    @font-face {
    font-family: '宋体';
    src: local('Helvetica Neue'), local('PingFang SC') ;
    }
    即英文字体使用前者,中文字体使用后者。
    在 Chrome 上测试了下,好像不好使。但 CSS @font-face 是可以同时指定多个字体的吧,这是浏览器的原因么,请指教。

    另外,为什么你的代码里,没有为粗体的代码,即:
    @font-face {
    font-family: '宋体';
    /* font-weight: bold; */
    unicode-range: U+2E80-FFFF;
    src: local('PingFang SC');
    }
    Daniel65536
        37
    Daniel65536  
       2016-03-29 02:33:27 +08:00 via iPhone   ❤️ 1
    @fetich 我用 Safari 。粗体那个是 chrome 自家的 bug/feature ,想用自己改吧~
    fetich
        38
    fetich  
       2016-03-29 22:14:15 +08:00
    @Daniel65536
    在 Chrome 又实验了下列代码
    @font-face {
    font-family: 'Microsoft YaHei';
    src: local('Roboto'); // 可以生效。
    font-weight: bold;
    unicode-range: U+0000-2E7F;
    }

    第三行代码如果改为 src: local('Roboto Bold'); 则没有效果,阿拉伯数字等字符仍显示雅黑的字体。
    问题是 从 Google 搜索结果、 MDN 等资料来看, src: local('Roboto Bold'); 才是正确的书写方法。彻底凌乱了,这是否是称其为 「 Chrome 自家的 bug 」的缘由?谢谢啦。
    lenovo
        39
    lenovo  
       2016-09-17 22:36:14 +08:00
    '瀹嬩綋'
    '����'

    这两个是什么字体?
    paulx3
        40
    paulx3  
       2017-08-01 15:28:25 +08:00
    所以还会更新吗?
    alexapollo
        41
    alexapollo  
    OP
       2017-08-02 21:16:03 +08:00
    @paulx3 有什么需求,说来听听
    xmhjnathan
        42
    xmhjnathan  
       2018-02-05 20:27:06 +08:00   ❤️ 1
    这儿是 stylish 的 mactype 优化( chrome ):

    *:not([class*="icon"]):not(i)
    {
    font-family: "微软雅黑" !important;
    }

    *
    {
    font-weight:500!important;
    text-shadow: 0.01em 0.01em 0.01em #999999 !important;
    }

    正愁 mono 字体要改呢,看了 stylus 大佬的作品突然有了新的想法
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1034 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:22 · PVG 03:22 · LAX 11:22 · JFK 14:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.