当前位置: Chrome插件首页 > Chrome插件问答 > 如何利用stylish插件自定义网页的字体?

如何利用stylish插件自定义网页的字体?

Chrome插件问答
 
stylish插件 除了可以利用网站提供的模板或者自己编写CSS改变网页样式之外,还有很多人都希望能用自己喜欢的字体来浏览网页。那么使用stylish插件能不能修改网页的字体呢?答案当然
stylish插件除了可以利用网站提供的模板或者自己编写CSS改变网页样式之外,还有很多人都希望能用自己喜欢的字体来浏览网页。那么使用stylish插件能不能修改网页的字体呢?答案当然是肯定的。使用 Stylish插件可以轻松达到这个目的!我们chrome插件网今天就来举例说明一下如何利用stylish插件自定义网页的字体。我们从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
在这里要推荐一款叫做 ForceMyFont 的模板,这个模板内置的选项非常丰富,允许你手动选择多款中英文字体,即使你对于 CSS 一窍不通,也可以轻松地完成字体设置,在列表中选定你要使用的字体,之后选择安装即可,非常方便。不过要注意你的电脑上是否已经安装了对应字体,如果没有则需要额外下载安装。
 

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

什么是 CSS?CSS 的中文全称是层叠样式表,是一种用来表现HTML 或 XML ……这是个晦涩的东西。换个通俗易懂说法,CSS 就好比是一个网页的衣服,虽然不能添加网页本身的功能,但可以决定排版、字体,甚至滚动条等一切与外表有关的东西。至于外表的重要性,我想不必多言,你也许比我更有体会。
点击打开stylish插件,点击新建样式编辑CSS:我们可以尝试做一个自己的小插件来实现这个功能。在磁盘上建一个目录,比如命名为My CSS,然后建立一个样式表文件,随便起名,比如叫my.css
stylish编辑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;}
保存之后就能立马看到效果了,引号中的字体可以任意替换。我们可以看到改造后的效果如下:
使用Stylish替换chrome的默认字体为微软雅黑
 
其他常见的样式优化代码有:
/*滚动条*/
::-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库。

好了,以上就是我们今天要给大家分享的全部内容,不知道是否对你有帮助。如果帮助到你,请轻轻点击鼠标分享我们网站的内容吧。

你可能感兴趣的内容:

1.Chrome Stylish插件怎么用?
2.Tampermonkey脚本安装问题及自用脚本推荐

3.Tampermonkey插件怎么用?

4.如何使用adblock plus过滤规则隐藏html元素?