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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

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

全网替换字体，中文替换为微软雅黑，英文替换为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

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-06-26 16:05:52 +08:00

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

nasta

2015-06-26 16:10:28 +08:00

你应该在Windows节点发...

cylin

2015-06-26 16:12:37 +08:00

属于分享创造吧 /go/create

lingyired

2015-06-26 16:13:28 +08:00

font icon 怎么办

alexapollo

2015-06-26 16:33:29 +08:00

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

alexapollo

2015-06-26 16:34:23 +08:00

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

FrankFang128

2015-06-26 16:36:59 +08:00

只改 body 比较好吧

tanete

2015-06-26 16:37:57 +08:00

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

crs0910

2015-06-26 16:42:09 +08:00

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

lilydjwg

2015-06-26 16:43:15 +08:00

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

Daniel65536

2015-06-26 16:44:17 +08:00

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

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

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-06-26 16:49:41 +08:00

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

lingyired

2015-06-26 17:01:00 +08:00

@alexapollo

*:not(*:before)

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

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

@Daniel65536 的方法太赞了

nasta

2015-06-26 17:32:45 +08:00

@alexapollo 哈哈，这个可以有

yangg

2015-06-26 17:37:08 +08:00

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

vali16

2015-06-26 19:12:17 +08:00 via Android

不错

Daniel65536

2015-06-26 19:36:31 +08:00

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

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

linux40

2015-06-26 19:44:39 +08:00

linux大法好

momo5269

2015-06-26 20:40:10 +08:00

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

bugmenott

2015-06-26 21:20:01 +08:00

@Daniel65536 看着很舒适

xieaoran

2015-06-26 21:25:37 +08:00 via Android

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

ladit

2015-06-26 21:37:19 +08:00 via iPhone

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

ls25145

2015-06-27 12:17:21 +08:00

装个MacType省事

nyanyh

2015-06-27 19:06:10 +08:00

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

ladit

2015-06-27 20:30:37 +08:00 via iPhone

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

nyanyh

2015-06-27 21:35:57 +08:00

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

nyanyh

2015-06-27 21:41:03 +08:00

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

ladit

2015-06-27 23:26:26 +08:00 via iPhone

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

nyanyh

2015-06-28 11:55:32 +08:00

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

Yamade

2015-06-28 18:46:38 +08:00

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

ladit

2015-06-29 10:50:13 +08:00

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

alexapollo

2015-06-30 11:36:08 +08:00

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

alexapollo

2015-06-30 11:40:20 +08:00

@Daniel65536 看APPEND~

Daniel65536

2015-07-01 00:02:12 +08:00

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

font family name is case-insensitive

civilians

2015-09-25 20:37:56 +08:00

google 搜索界面没有变...

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

2016-03-29 02:33:27 +08:00 via iPhone

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

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

2016-09-17 22:36:14 +08:00

'瀹嬩綋'
'��'

这两个是什么字体？

paulx3

2017-08-01 15:28:25 +08:00

所以还会更新吗？

alexapollo

2017-08-02 21:16:03 +08:00

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

xmhjnathan

2018-02-05 20:27:06 +08:00

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