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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 3859 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

第 1 条附言 · 2015 年 6 月 30 日

新CSS出炉了：
https://userstyles.org/styles/115780/alexapollo-consolas

基于 Daniel65536 的 gist

https://gist.github.com/blackgear/d6981d468d6c3191593b

修改。
中文统一微软雅黑，英文统一Consolas。
注1：只识别常见字体，不常见字体不会替换。
注2：google中字体arial和gist中首字母大写的Arial不匹配 @Daniel65536 看下？

替换

Consolas

stylish

42 条回复 • 2018-02-05 20:27:07 +08:00

alexapollo

2015 年 6 月 26 日

不知道这个分享放到哪个TAB里比较合适。
主要解决了自己看各类docs被各类难看字体烦到不行的问题。

nasta

2015 年 6 月 26 日

你应该在Windows节点发...

cylin

2015 年 6 月 26 日

属于分享创造吧 /go/create

lingyired

2015 年 6 月 26 日

font icon 怎么办

alexapollo

2015 年 6 月 26 日

@lingyired 就是这个比较头疼，正在想方法，有好主意吗？

alexapollo

2015 年 6 月 26 日

@nasta 其实也可以加上兰亭黑文泉译什么的~

FrankFang128

2015 年 6 月 26 日

只改 body 比较好吧

tanete

2015 年 6 月 26 日

试用了，感觉还不错。继续关注！

crs0910

2015 年 6 月 26 日

@alexapollo 还是搞一个白名单，只换掉常见的字体

lilydjwg

2015 年 6 月 26 日

有没有想要全网禁用微软雅黑、微软正黑体、文泉驿微米黑、细明体、新细明体的？

Daniel65536

2015 年 6 月 26 日

这是作死，而且技术太落后了。

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

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

2015 年 6 月 26 日

@Daniel65536 我就喜欢能炸出潜水的尖端码农

lingyired

2015 年 6 月 26 日

@alexapollo

*:not(*:before)

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

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

@Daniel65536 的方法太赞了

nasta

2015 年 6 月 26 日

@alexapollo 哈哈，这个可以有

yangg

2015 年 6 月 26 日

@Daniel65536 我之前也想到过这种方案，不过如果真的实行的话，每天看一种字体不疲劳？

vali16

2015 年 6 月 26 日 via Android

不错

Daniel65536

2015 年 6 月 26 日

@yangg 每天看一种字体为啥会疲劳？我觉得看宋体更加让我疲劳…

当然，上面没写清楚，我那个css没有把英文字体统一成一种，所以英文还是各种各样的，不过中文还是老老实实只用最好的一个比较好。毕竟好的中文字体太少了。
把等宽字体统一成一种的理由很简单，PragmataPro是我眼中最漂亮的等宽字体，而且我花钱买了+_+

linux40

2015 年 6 月 26 日

linux大法好

momo5269

2015 年 6 月 26 日

雅黑看久了会累死人的 = =

bugmenott

2015 年 6 月 26 日

@Daniel65536 看着很舒适

xieaoran

2015 年 6 月 26 日 via Android

不能直接
body{
font-family: *** !important;
}
啊......

ladit

2015 年 6 月 26 日 via iPhone

http://bbs.kafan.cn/forum.php?mod=viewthread&tid=1681393
一直用着这个，感觉不错。

ls25145

2015 年 6 月 27 日

装个MacType省事

nyanyh

2015 年 6 月 27 日

@ladit 在用这个帖子的方法时，在Chrome下有没有发现远景论坛（bbs.pcbeta.com)的字体无法替换？
我这里总会自动强制雅黑，无法设置别的字体

ladit

2015 年 6 月 27 日 via iPhone

@nyanyh 检查配置是否正确：stylish，chrome（在chrome://flags下打开(关闭？不太记得了)cleartype），一般加上mactype，还有chrome的设置里的字体也要改，上述帖子的配置需要按个人情况配置，并且在stylish中删除第8行代码。

nyanyh

2015 年 6 月 27 日

@ladit 这个页面在我这不论怎么修改配置，刚打开页面时强制字体是生效的，但1秒左右又回变回雅黑，其他网页没遇到这个问题

nyanyh

2015 年 6 月 27 日

@nyanyh 而且用Custom.css，同样的代码是可以强制设置字体的。估计应该是Discuz!本身的css覆盖了Stylish的设置

ladit

2015 年 6 月 27 日 via iPhone

@nyanyh 是自动变回？没有刷新应该不会吧？stylish应该是强制覆盖所有吧。另外还可以看看是否有拓展冲突。

nyanyh

2015 年 6 月 28 日

@ladit 确实是自动变回，新建配置文件也一样，打开后是设置好的字体，过一会就变成雅黑
现在发现在http://cdn.pcbeta.css.inimc.com//data/cache/style_6_common.css中设置了字体，但是不知道怎么屏蔽它，直接过滤这个css会导致网页丢失格式

Yamade

2015 年 6 月 28 日

感谢,貌似 google搜索结果没变

ladit

2015 年 6 月 29 日

@nyanyh 0.0那就不管这个咯。。如果不常上的话。。或者向pcbeta反馈下看看？

alexapollo

2015 年 6 月 30 日

其实还是有一些问题的，比如V站上的登出按钮就换行了

alexapollo

2015 年 6 月 30 日

@Daniel65536 看APPEND~

Daniel65536

2015 年 7 月 1 日

@alexapollo
http://www.w3.org/TR/css3-fonts/#font-family-casing

font family name is case-insensitive

civilians

2015 年 9 月 25 日

google 搜索界面没有变...

fetich

2016 年 3 月 29 日

@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

2016 年 3 月 29 日 via iPhone

@fetich 我用 Safari 。粗体那个是 chrome 自家的 bug/feature ，想用自己改吧～

fetich

2016 年 3 月 29 日

@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

2016 年 9 月 17 日

'瀹嬩綋'
'��'

这两个是什么字体？

paulx3

2017 年 8 月 1 日

所以还会更新吗？

alexapollo

2017 年 8 月 2 日

@paulx3 有什么需求，说来听听

xmhjnathan

2018 年 2 月 5 日

这儿是 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 大佬的作品突然有了新的想法