☰

知乎回答界面排版、字体、字号优化

通过拉伸回答区域的屏幕占比、修改回答字体(微软雅黑)、增大字号(24px)、图片居中来增强1080P荧幕上的阅读体验。

  1. // ==UserScript==
  2. // @name     知乎回答界面排版、字体、字号优化
  3. // @namespace JohnRowton
  4. // @version  20200405
  5. // @descriptio  本脚本用于优化知乎(zhihu.com)在PC上的Chrome等主流浏览器上的阅读体验。
  6. // @author   JohnRowton
  7. // @match        https://www.zhihu.com/follow
  8. // @match        https://www.zhihu.com/hot
  9. // @match        https://www.zhihu.com/question/*
  10. // @match        https://www.zhihu.com/search?*
  11. // @match        https://www.zhihu.com
  12. // @match        https://zhuanlan.zhihu.com/p/*
  13. // @description 通过拉伸回答区域的屏幕占比、修改回答字体(微软雅黑)、增大字号(24px)、图片居中来增强1080P荧幕上的阅读体验。
  14. // ==/UserScript==
  15.  
  16. (function () {
  17.     'use strict'
  18.     var path = location.pathname.slice(0);
  19.         (function () {
  20.             // 修改主页样式
  21.             if (path == '/' || path == '/follow' || path == '/hot') {
  22.                 // 定制主框
  23.                 var node3 = document.querySelector(".Topstory-container")
  24.                 node3.style.width = '97%'
  25.                 var inner = document.querySelector('.Topstory-mainColumn')
  26.                 inner.style.width = '100%'
  27.                 inner.style.fontFamily = 'Times New Roman,微软雅黑'
  28.                 inner.style.fontSize = '24px'
  29.                 // 定制评论栏
  30.                 let doCSS = document.createElement('style')
  31.                 doCSS.innerHTML += '.RichContent-actions{height:12px !important;}'
  32.                 doCSS.innerHTML += ".Topstory-noMarginCard,.TopstoryItem-isRecommend,.ContentItem-actions,.AppHeader,#root,.TopstoryItem,.HotItem,.HotListNav-wrapper,.CommentsV2 ,.Topbar,.CommentsV2-footer{background-color: ffffff !important}"
  33.                 doCSS.innerHTML += '.VoteButton{color:#999 !important;background: ffffff !important;height:12px !important}'
  34.                 doCSS.innerHTML += ".ContentItem-title {font-size: 22px;}"
  35.                 doCSS.innerHTML += ".HotListNav-item{background-color: #bad889 !important}"
  36.                 //图片和视频的显示区域大小
  37.                 doCSS.innerHTML += '.origin_image{max-width:500px !important}'
  38.                 doCSS.innerHTML += '.RichText-video{max-width:500px !important}'
  39.                 //文章内代码区
  40.                 doCSS.innerHTML += '.highlight pre{font-size:medium !important;background-color: #cbde8c !important;}'
  41.                 document.getElementsByTagName('head')[0].appendChild(doCSS)
  42.             }
  43.         })();
  44.         (function () {
  45.             //修改专栏样式
  46.             if (path.match(/\/p\/\d+/g)) {
  47.                     window.onload = function () {
  48.                     //正文
  49.                     var contentTxt = document.querySelector('.Post-RichTextContainer')
  50.                     contentTxt.style.width = '95%'
  51.                     contentTxt.style.fontSize = '30px'
  52.                     contentTxt.style.fontFamily = 'Times New Roman,微软雅黑'
  53.                     contentTxt.style.backgroundColor = 'ffffff'
  54.                     //推荐框
  55.                     var inner7 = document.querySelector('.Post-NormalSub>div.Recommendations-Main')
  56.                     inner7.style.width = '100%'
  57.                     inner7.style.backgroundColor = 'ffffff'
  58.                     //评论框
  59.                     var inner8 = document.querySelector('.Post-NormalSub>div.Comments-container')
  60.                     inner8.style.width = '100%'
  61.                     inner8.style.backgroundColor = 'ffffff'
  62.                     var inner9 = document.querySelector(".CommentsV2-withPagination")
  63.                     inner9.style.backgroundColor = 'ffffff'
  64.                     // 评论栏定制
  65.                     let doCSS = document.createElement('style')
  66.                     doCSS.innerHTML += '.RichContent-actions {bottom:auto !important;background-color: ffffff !important}'
  67.                     doCSS.innerHTML += '.VoteButton,.ContentItem-actions,.Topbar,.CommentsV2-footer,.App-main{background-color: ffffff !important}'
  68.                     //图片和视频的显示区域大小
  69.                     doCSS.innerHTML += '.origin_image,.TitleImage{max-width:500px !important}'
  70.                     doCSS.innerHTML += '.RichText-video{max-width:500px !important}'
  71.                     //文章内代码区
  72.                     doCSS.innerHTML += '.highlight pre{font-size:medium !important;background-color: #cbde8c !important;}'
  73.                     document.getElementsByTagName('head')[0].appendChild(doCSS)
  74.                 }
  75.  
  76.             }
  77.         })();
  78.         (function () {
  79.             //这里修改回答页的样式
  80.             if (path.match(/\/question\/\d+/g)) {
  81.                 window.onload = function () {
  82.                     //修改回答区的宽度，字体大小
  83.                     var inner0 = document.querySelector('.Question-main')
  84.                     inner0.style.width = '97%'
  85.                     var inner = document.querySelector('.Question-mainColumn')
  86.                     inner.style.width = '100%'
  87.                     inner.style.fontSize = '30px'
  88.                     inner.style.fontFamily = 'Times New Roman,微软雅黑'
  89.                     // 评论栏定制
  90.                     let doCSS = document.createElement('style')
  91.                     doCSS.innerHTML += '.RichContent-actions{bottom:auto !important}'
  92.                     doCSS.innerHTML += '.VoteButton{color:#999 !importantbackground: none !important}'
  93.                     doCSS.innerHTML += '.QuestionHeader,.QuestionHeader-footer,#root,.List,.ContentItem-actions,.CommentsV2,.Topbar,.CommentsV2-footer{background-color: ffffff !important}'
  94.                     //图片和视频的显示区域大小
  95.                     doCSS.innerHTML += '.origin_image{max-width:500px !important}'
  96.                     doCSS.innerHTML += '.RichText-video{max-width:500px !important}'
  97.                     //文章内代码区
  98.                     doCSS.innerHTML += '.highlight pre{font-size:medium !important;background-color: #cbde8c !important;}'
  99.                     document.getElementsByTagName('head')[0].appendChild(doCSS)
  100.                 }
  101.             }
  102.         })();
  103.     (function () {
  104.         // 搜索页定制
  105.         if (path.match(/\/search?.*/g)) {
  106.             //修改正文区域
  107.             var inner0 = document.querySelector('.Search-container')
  108.             inner0.style.width = '100%'
  109.  
  110.             var inner1 = document.querySelector('.SearchMain')
  111.             inner1.style.width = '100%'
  112.             inner1.style.fontFamily = 'Times New Roman,微软雅黑'
  113.             inner1.style.fontSize = '26px !important'
  114.             // 定制评论栏
  115.             let doCSS = document.createElement('style')
  116.             doCSS.innerHTML += '.RichContent-actions{height:12px !important;}'
  117.             doCSS.innerHTML += ".Topstory-noMarginCard,.TopstoryItem-isRecommend,.ContentItem-actions,.AppHeader,#root,.TopstoryItem,.SearchTabs,.HotItem,.HotListNav-wrapper,.CommentsV2 ,.Topbar,.CommentsV2-footer,.SearchResult-Card{background-color: ffffff !important}"
  118.             doCSS.innerHTML += '.VoteButton{color:#999 !important;background: ffffff !important;height:12px !important}'
  119.             doCSS.innerHTML += ".ContentItem-title {font-size: 22px !important;};.RichText {font-size: 20px !important;}"
  120.             doCSS.innerHTML += ".HotListNav-item{background-color: #bad889 !important}"
  121.             //图片和视频的显示区域大小
  122.             doCSS.innerHTML += '.origin_image{max-width:500px !important}'
  123.             doCSS.innerHTML += '.RichText-video{max-width:500px !important}'
  124.             //文章内代码区
  125.             doCSS.innerHTML += '.highlight pre{font-size:medium !important;background-color: #cbde8c !important;}'
  126.             document.getElementsByTagName('head')[0].appendChild(doCSS)
  127.         }
  128.     })();
  129. })()

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址