stylish插件 除了可以利用网站提供的模板或者自己编写CSS改变网页样式之外，还有很多人都希望能用自己喜欢的字体来浏览网页。那么使用stylish插件能不能修改网页的字体呢？答案当然   stylish插件除了可以利用网站提供的模板或者自己编写CSS改变网页样式之外，还有很多人都希望能用自己喜欢的字体来浏览网页。那么使用stylish插件能不能修改网页的字体呢？答案当然是肯定的。使用 Stylish插件可以轻松达到这个目的！我们chrome插件网今天就来举例说明一下如何利用stylish插件自定义网页的字体。我们从stylish基础知识以及stylish实战操作两部分来讲解。

stylish插件基础知识

在了解如何使用stylish插件修改网页字体之前，我们有必要先来了解一些基础知识：
1.什么是stylish插件？
这个神奇的 Stylish插件实际上是一个浏览器插件，适用于 Chrome，Firefox，Opera 以及 Safari 浏览器等。Stylish通过替换网页本身的CSS来达到的美化网站的目的。这么神奇的插件让我不禁想起了tampermonkey。

2.stylish插件有什么用？
 stylish插件的功能可以简单的概括为，可以任意修改你喜欢网站的外观；可以自定义网站的背景、配色、字体甚至修改网页上的动画；可以方便地禁用、启用、编辑或删除任意已安装主题；  利用Stylish的CSS编辑器创建自己的用户样式（主题），然后与数百万Stylish用户共享。高手甚至可以利用stylish插件 Stylish实现去除广告、补全浏览器部分功能等。
   3.stylish插件怎么用？
这个我们就不详细介绍了，感兴趣的朋友可以去：Chrome Stylish插件怎么用？

stylish插件实战操作

今天我们的主题是如何利用stylish插件自定义网站的字体，所以我们就以这个作为stylish实战操作：使用Stylish替换chrome的默认字体为微软雅黑。 对chrome stylish插件的使用有一定了解的应该知道 userstyles网站了。  

方法一：去userstyles网站搜索模块。

当我们在chrome浏览器中安装好stylish插件后，会发现里面空空如也，要修改网页的字体，那么我们接下来就是要添加CSS样式模板了。打开 Stylish 的菜单，点击“ 查找适合此网站的更多样式 ”」。Stylish 就会为你列出该网站合适的CSS模板。但是我们这次是要修改字体，所以我们在 userstyles网站 搜索“ 字体 ”，（不过这个网站打开的速度不敢恭维。。。）你可以轻松找到很多现成的模板供你挑选使用，下载后几乎不需调整即可直接使用。     在这里要推荐一款叫做 ForceMyFont 的模板，这个模板内置的选项非常丰富，允许你手动选择多款中英文字体，即使你对于 CSS 一窍不通，也可以轻松地完成字体设置，在列表中选定你要使用的字体，之后选择安装即可，非常方便。不过要注意你的电脑上是否已经安装了对应字体，如果没有则需要额外下载安装。    

方法二：自己编辑CSS修改字体

什么是 CSS？CSS 的中文全称是层叠样式表，是一种用来表现HTML 或 XML ……这是个晦涩的东西。换个通俗易懂说法，CSS 就好比是一个网页的衣服，虽然不能添加网页本身的功能，但可以决定排版、字体，甚至滚动条等一切与外表有关的东西。至于外表的重要性，我想不必多言，你也许比我更有体会。
 点击打开stylish插件，点击新建样式编辑CSS：我们可以尝试做一个自己的小插件来实现这个功能。在磁盘上建一个目录，比如命名为My CSS，然后建立一个样式表文件，随便起名，比如叫my.css

要实现替换字体，其实很简单，就两行代码：   /*字体样式，字体阴影*/   *: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;}   保存之后就能立马看到效果了，引号中的字体可以任意替换。我们可以看到改造后的效果如下：
       其他常见的样式优化代码有：
 /*滚动条*/   ::-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   }
注意：Mac 用户，想要调用最新的San Francisco 字体，可能会发现这个字体并不在Font Book 里，而在 CSS 中直接键入"San Francisco" 也没有效果，这是因为苹果并没有把这个字体放在 Font Book中供大家使用，如果想在网页上使用这个字体，需要用-apple-system, BlinkMacSystemFont库。    
好了，以上就是我们今天要给大家分享的全部内容，不知道是否对你有帮助。如果帮助到你，请轻轻点击鼠标分享我们网站的内容吧。