当前位置: 上海快三开奖结果查询结果 > Chrome插件问答 > 如何利用stylish插件自定义网页的字体?

上海快三昨日走势图:如何利用stylish插件自定义网页的字体?

Chrome插件问答
 
stylish插件 除了可以利用网站提供的模板或者自己编写CSS改变网页样式之外,还有很多人都希望能用自己喜欢的字体来浏览网页。那么使用stylish插件能不能修改网页的字体呢?答案当然
stylish插件除了可以利用网站提供的模板或者自己编写CSS改变网页样式之外,还有很多人都希望能用自己喜欢的字体来浏览网页。那么使用stylish插件能不能修改网页的字体呢?答案当然是肯定的。使用 Stylish插件可以轻松达到这个目的!我们上海快三开奖结果查询结果网今天就来举例说明一下如何利用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脚本安装问题及自用脚本推荐

上海快三开奖结果查询结果 www.mbgp0.cn 3.Tampermonkey插件怎么用?

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


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

Chrome Stylish插件怎么用?

Chrome插件百科 2018-05-09 17:43:32

stylish 插件是我们对网站进行样式修改时常用的 chrome插件 。其原理就是修改网页的CSS样式,用户可以通过自己写css代码,来修改网页为自己喜欢的排版和浏览习惯,这个对于文字较多的

WhatFont:识别网页上的字体

开发者插件 2019-01-09 11:48:25

WHATFONT是一款可以帮助用户查看识别网页字体的浏览器插件。日常工作中,当我们在浏览一个页面非常好看的网站的时候,往往会遇到各种各样的个性化的字体,我们可能会很知道这是什

网站样式管理器-Stylish

开发者插件 2018-05-09 17:40:29

Restyle网络与时尚,一个用户样式管理器。时尚让你轻松安装主题和外观的许多著名景点。
用户风格主题的网站。用户样式赋予你的浏览体验,让你自定义的网站。拿出不相关的内容

ESI Stylish

辅助插件 2018-05-09 17:42:12

改善视力和姿势点几下感谢ESI风格!
降低损坏计算机上用眼卫生和背部,眼睛疲劳和由ESI风格补偿近视!只需选择您从一个安全的距离,仅读和永远盯着电脑的字体大小,看小字。

Set Character Encoding

办公插件 2019-02-14 15:35:56

浏览器字体编码插件,新版本google浏览器去掉了设置编码功能,需要安装插件才支持修改编码格式,可将此插件下载后加入到扩展程序中,右键即可看到 Set Character Encoding选项,选择“

Stylish Web Themes

游戏娱乐插件 2018-05-09 17:41:33

风格你最喜爱的网站以惊人的主题和皮肤1000
要更新一个网站的风格,改变其颜色,删除不需要的内容,或添加一个真棒主题?浏览WebStyler主题库,然后从数以千计的主题,设计和皮

  • 一周新疆新闻图片扫描(6.2——6.8) 2019-05-11
  • 计划经济不是产生于利益交换之上的计划经济。说白了,计划经济就是为人民服务的计划经济。要养活14亿,甚至24亿中国人的经济。 2019-05-11
  • 新疆维吾尔自治区关心下一代工作委员会 2019-05-05
  • 指尖触碰 你我结缘丨浙江新闻4周年 我们再出发 2019-04-29
  • 亚冠小结:恒大权健暴露隐患 上港申花一喜一忧 2019-04-25
  • 【北京团购】一汽马自达全系团购会优惠 2019-04-09
  • 美军或拨75亿专款 专家将加强美在亚太军事存在 2019-04-08
  • 你真没一点脑子,文字是哪个人的,你到说说啊 2019-04-06
  • 他帖子里的明理,就是要人们放弃自己的利益,一切顺从别人的指挥棒转 2019-04-03
  • 楼市下半年或持续降温 房地产长效机制加速推进 2019-04-03
  • 学习宣传贯彻习近平新时代中国特色社会主义思想系列研讨会第三场研讨会发言摘编 2019-03-26
  • 7200万?有木有计划突破1亿?[哈哈] 2019-03-26
  • 重庆一高校捞出数条大鱼 校方不吃了 卖掉买鱼苗 2019-03-26
  • 荒谬!西方记者造谣中国用金特会礼品搞"间谍活动" 2019-03-26
  • 乘龙T5全国上市 柳汽双子星布局全面完成 2019-03-25
  • 248| 419| 854| 348| 640| 582| 432| 639| 646| 264|