修改网站样式，替换网页字体，这款插件帮你轻松搞定：Stylish_html/css_WEB-ITnose

Stylish 是什么？

开门见山，Stylish 的作用是，它可以把百度首页变成这样：

它还能把知乎「拍扁」，让微博网页版变得简洁无比，让 Feedly 用上 Material Design……

这个神奇的 Stylish 实际上是一个浏览器插件，适用于 Chrome ， Firefox ， Opera 以及 Safari 浏览器（点击浏览器名称即可下载）。 Stylish 通过替换网页本身的 CSS 来达到的「美化」的目的。

什么是 CSS？CSS 的中文全称是  层叠样式表 ，是一种用来表现 HTML 或 XML ……这是个晦涩的东西。换个通俗易懂说法，CSS 就好比是一个网页的衣服，虽然不能添加网页本身的功能，但可以决定排版、字体，甚至滚动条等一切与外表有关的东西。至于外表的重要性，我想不必多言，你也许比我更有体会。

CSS 高深但 Stylish 也可以很易用

Stylish 的基本用法非常简单，从官网安装 Stylish 到你的浏览器。在 Stylish 的选项菜单中你可以更新、停用、卸载、编辑已经安装的 CSS，这和 Chrome 的扩展程序管理类似。

* 不同浏览器界面略有区别，但使用方法相同，本文以 Chrome 为例

现在你的 Stylish 里面空空如也，接下来就是要添加 CSS 样式模板了。别怕，你只需要信手打开一个网站，打开 Stylish 的菜单，点击「查找适合此网站的更多样式」，Stylish 就会为你列出该网站合适的 CSS 模板。

你也可以直接前往 userstyles.org 寻找已经编写好的 CSS 模板，这里就是 Stylish 的「应用商店」，不过网站的界面并不友好，建议善用左上角的搜索功能。

找到心仪的模板之后，点击绿色按钮即可安装，像安装浏览器插件一样无痛。而某些 CSS 还有更多可选项，如图。

你应该试试这些 CSS 模板

1. 给你一个干净的微博： Weibo_v6

这款 CSS 和一款叫做「微博急简」的 Chrome 插件有同样的功效，把微博来个大换装，去掉广告等多余元素，重新排版，给你一个干净的微博。

2. 百度也用上 Material Design： 百度轻

这就是文首看到的能让百度用上 Material Design 风格的 CSS 了。它同样适用于搜索结果页面。

3. Google 搜索的再美化： Google Search - Material Design

这款 CSS 是根据 Dribbble 上的设计师  Aurélien Salomon ➔ 重新设计的 Google 搜索 做出来的。类似上文的百度轻，由于 Google 本身已经很干净，所以效果提升并没有百度那么明显，好看倒是真的。

4. 扁平版知乎： Flat_Zhihu

这款 CSS 不仅是把知乎拍平，还优化了字体，动效，以及页面宽度。总之看起来比原版舒服多了，看知乎终于不用开页面缩放了。

5. 全局夜间模式： NightShift - eye care

这款全局 CSS 能将页面中白色的部分变黑，图片亮度降低，用起来就像开了「夜间模式」一样。会出现些许兼容问题，不影响使用。

6. Mac 风格滚动条： Universial Minimalist Scroll Bar

这是针对 Windows 系统的全局 CSS 样式。他能让你的浏览器拥有 Mac OS X 样式的透明极简滚动条。

使用 Stylish 自定义网页字体

除了使用上面的模板改变网页样式之外，很多人都希望能用自己喜欢的字体来浏览网页，使用 Stylish 可以轻松达到这个目的，在 userstyles 网站搜索「字体」，你可以轻松找到很多现成的模板供你挑选使用，下载后几乎不需调整即可直接使用。

在这里要推荐一款叫做 ForceMyFont 的模板，这个模板内置的选项非常丰富，允许你手动选择多款中英文字体，即使你对于 CSS 一窍不通，也可以轻松地完成字体设置，在列表中选定你要使用的字体，之后选择安装即可，非常方便。不过要注意你的电脑上是否已经安装了对应字体，如果没有则需要额外下载安装。

如果你懂一些 CSS 样式，你当然也可以手动编写页面效果。这样做的好处是自由度高，可以按自己的喜好想改啥改啥，但使用门槛也成正比的高。在这里我举一个自定义字体 CSS 的例子。

首先，打开 Stylish 的选项菜单，选择「编写新样式」，填入下面的代码：

*{font-weight:600!important;}

*{font-family: Arial, ”方正兰亭黑简体”;}

其中第一行是定义字体的粗细，越大越粗。第二行是指定的字体，填入一个电脑中已安装的字体就好。

如果你喜欢字体阴影，可以加入下面这行代码：

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

其中的数值依次代表阴影的 X 轴偏移、Y 轴偏移、阴影大小，以及字体颜色。

当填写好「应用对象」之后去页面查看一下效果吧。如果想要应用到全局，如上图配置即可。

最后要说一下，如果你是 Mac 用户，想要调用最新的 San Francisco 字体，可能会发现这个字体并不在 Font Book 里，而在 CSS 中直接键入 "San Francisco"  也没有效果，这是因为苹果并没有把这个字体放在 Font Book 中供大家使用，如果想在网页上使用这个字体，需要用  -apple-system, BlinkMacSystemFont, 才行

最后

可以看到，Stylish 可以优化页面的样式。对于大多数普通用户来说，使用 Stylish 套用那些现成的模板，来优化那些设计不佳或风格不喜欢的网站，是个很好的解决方案。

更进阶一点的话， Stylish 实际上 还可以实现去除广告、补全浏览器部分功能。但这不在本文的范围之中， 这篇文章仅作为抛砖引玉，以便让更多人先知道并初步了解这样一款浏览器扩展。

欢迎各位在评论里一起讨论 Stylish 的更多用法，或分享你喜欢的 CSS 模板。