V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
journey
V2EX  ›  分享发现

使用 Stylish 替换 chrome 的默认字体

  •  
  •   journey · 2015-08-03 16:36:45 +08:00 · 7790 次点击
    这是一个创建于 3411 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天在知乎上看到了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
    }
    

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

    10 条回复    2015-08-05 14:26:44 +08:00
    laincat
        1
    laincat  
       2015-08-03 16:51:03 +08:00
    在想 火狐 能用吗?

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

    在用这个,但是 最新 升级 win10 有点怪怪的。。。
    journey
        2
    journey  
    OP
       2015-08-03 16:56:02 +08:00
    @laincat Stylish也有火狐插件的,新增一个样式把这些代码搞进去就行了。
    win10的字体问题....看这个:
    http://zhuanlan.zhihu.com/first-aid/20112246
    jamesxu
        3
    jamesxu  
       2015-08-03 17:00:45 +08:00
    你这个标题也太黑了吧
    elementary
        4
    elementary  
       2015-08-03 18:29:59 +08:00
    还是挺好看的
    ivmm
        5
    ivmm  
       2015-08-03 18:43:24 +08:00
    还是有些不舒服,再改改
    lonelygo
        6
    lonelygo  
       2015-08-03 19:28:25 +08:00
    @ivmm 字重全部弄低一点呢?亲,目前看起来太黑了。
    我是伸手党,你懂的
    journey
        7
    journey  
    OP
       2015-08-03 20:05:58 +08:00
    @lonelygo 我这个截图的效果是开了mactype渲染的,所以太粗了。你直接用的话应该不是我这个样子的。你试试就知道。
    lonelygo
        8
    lonelygo  
       2015-08-04 09:51:40 +08:00
    @journey 好吧,我琢磨下争取读明白后看看能不能自己优化下。
    MinonHeart
        9
    MinonHeart  
       2015-08-05 08:52:31 +08:00
    为什么现在还有人喜欢弄这东西
    stingzou
        10
    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;
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4661 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:03 · PVG 12:03 · LAX 20:03 · JFK 23:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.