使用 Stylish 替换 chrome 的默认字体

V2EX = way to explore

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

现在注册

已注册用户请登录

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

今天在知乎上看到了Chrome 设置什么字体较好？

然后我也就想动手改造一下chrome，使用Stylish替换chrome的默认字体为微软雅黑。

Stylish这个插件可以让你轻松定制任意网站的css样式。
Stylish安装地址

要实现替换字体，其实很简单，就两行代码：

/*字体样式，字体阴影*/
*:not([class*="icon"]):not(i){font-family: "微软雅黑" !important;}
/*
*:not([class*="icon"]):not(i){font-family: "思源黑体 Regular" !important;}
*/
*{text-shadow:0.01em 0.01em 0.01em #999999 !important;}

保存之后就能立马看到效果了，引号中的字体可以任意替换。
我机子上试了下思源黑体，效果没有雅黑好....

/t/201393 这个帖子中的插件会导致字重有问题，有些粗体看起来和普通没区别，我这样做则不会。

然后又看到了其他的一些样式优化代码，一起分享给大家：

/*滚动条*/
::-webkit-scrollbar{width: 6px;height: 6px;}
::-webkit-scrollbar-track-piece{background-color: #CCCCCC;-webkit-border-radius: 6px;}
::-webkit-scrollbar-thumb:vertical{height: 5px;background-color: #999999;-webkit-border-radius: 6px;}
::-webkit-scrollbar-thumb:horizontal{width: 5px;background-color: #CCCCCC;-webkit-border-radius: 6px;}
::-webkit-scrollbar {width: 9px;height: 9px;}
::-webkit-scrollbar-track-piece {background-color: transparent;}
::-webkit-scrollbar-track-piece:no-button {}
::-webkit-scrollbar-thumb {background-color: #3994EF;border-radius: 3px;}
::-webkit-scrollbar-thumb:hover {background-color: #A4EEF0;}
::-webkit-scrollbar-thumb:active {background-color: #666;}
::-webkit-scrollbar-button:vertical { width: 9px; }
::-webkit-scrollbar-button:horizontal { width: 9px; }
::-webkit-scrollbar-button:vertical:start:decrement { background-color: white; }
::-webkit-scrollbar-button:vertical:end:increment { background-color: white; }
::-webkit-scrollbar-button:horizontal:start:decrement { background-color: white; }
::-webkit-scrollbar-button:horizontal:end:increment { background-color: white; }
body::-webkit-scrollbar-track-piece {background-color: white;}

/*指向图片绿光*/
img:hover{box-shadow: 0px 0px 4px 4px rgba(130,190,10,0.6) !important;-webkit-transition-property: box-shadow;-webkit-transition-duration: .31s;}
img{-webkit-transition-property: box-shadow;-webkit-transition-duration: .31s;}

/*输入框美化*/
input { border:#ccc 1px solid; border-radius: 6px; -webkit-border-radius: 6px;-webkit-border-radius: 6px;}
input[type=”text”]:focus, input[type=”password”]:focus, textarea:focus {border: 2px solid #6FA1D9 !important;-webkit-box-shadow:0px 0px 5px #6FA1D9 !important;outline:none}
input[type=”checkbox”]:focus,input[type=”submit”]:focus,input[type=”reset”]:focus, input[type=”radio”]:focus {border: 1px solid #6FA1D9 !important; outline:none}
input:focus, select:focus, textarea:focus {outline: 1px solid #10bae0 ;-webkit-outline-radius: 3px ;}
body a:hover:active {color: #10bae0;}
body *:focus {outline: 2px solid rgba(16,186,224,0.5) ;outline-offset: 1px ;outline-radius: 2px ;-webkit-outline-radius: 2px ;}
body a:focus {outline-offset: 0px ;}
body button:focus,
body input[type=reset]:focus, body input[type=button]:focus, body input[type=submit]:focus {outline-radius: 2px !important;-webkit-outline-radius: 2px !important;}
body textarea:focus, body button:focus, body select:focus, body input:focus {outline-offset: -1px !important;}

/*淡蓝色样式*/
a{-webkit-transition: all 0.3s ease-out;}
a:hover{color: #39F !important;text-shadow:-5px 3px 18px #39F !important;-webkit-transition: all 0.3s ease-out;}
*::-webkit-selection {background: #333333 !important; color: #00FF00 !important; }

/*去除下划线*/
*{text-decoration:none!important}
a:hover{text-decoration:none!important}
a{
/*color: #014A8F;*/
-webkit-transition-property:color;
-webkit-transition-duration: 0.0s;
}

/*指向文字加粗*/
a:hover {
/*color: #0000FF ;*/
-webkit-transition-property:color;
-webkit-transition-duration: 0.0s;
font-weight:bold
}

然后我又通过安装了一些其他样式之后，改造后的知乎样式:

scrollbar

webkit

background

10 条回复 • 2015-08-05 14:26:44 +08:00

laincat

2015-08-03 16:51:03 +08:00

在想火狐能用吗？

https://userstyles.org/styles/100473/004-forcemyfonts-chinese-firefoxchromeie-catcat520

在用这个，但是最新升级 win10 有点怪怪的。。。

journey

2015-08-03 16:56:02 +08:00

@laincat Stylish也有火狐插件的，新增一个样式把这些代码搞进去就行了。
win10的字体问题....看这个：
http://zhuanlan.zhihu.com/first-aid/20112246

jamesxu

2015-08-03 17:00:45 +08:00

你这个标题也太黑了吧

elementary

2015-08-03 18:29:59 +08:00

还是挺好看的

ivmm

2015-08-03 18:43:24 +08:00

还是有些不舒服，再改改

lonelygo

2015-08-03 19:28:25 +08:00

@ivmm 字重全部弄低一点呢？亲，目前看起来太黑了。
我是伸手党，你懂的

journey

2015-08-03 20:05:58 +08:00

@lonelygo 我这个截图的效果是开了mactype渲染的，所以太粗了。你直接用的话应该不是我这个样子的。你试试就知道。

lonelygo

2015-08-04 09:51:40 +08:00

@journey 好吧，我琢磨下争取读明白后看看能不能自己优化下。

MinonHeart

2015-08-05 08:52:31 +08:00

为什么现在还有人喜欢弄这东西

stingzou

2015-08-05 14:26:44 +08:00

我也一直用这个插件，来补充一条，主要是针对各种网站使用了webfont的。
div,p,body,input,textarea,select,a,label,font,span,td,h1,pre,button,li,dt,h1,h2,h3,h4,h5,h6,em {
font-family: "Segoe UI","思源黑体 CN","Source Han Sans CN","noto sans","微软雅黑", "Microsoft Yahei", "Helvetica Neue", "Hiragino Sans GB", shop-iconfont, global-iconfont,tb-toolbar-iconfont,tm-detail-font,'Inoreader-UI-Icons-Font',FontAwesome,'Glyphicons Halflings',octicons,'iconfont','aliyun-console-font','qlisticon','Tower','ju-font','customicons' , "towericon",baikeFont_cmnIconFont !important;