使用 Stylus 使网页更具可读性

主要观点:Stylus 是开源浏览器扩展,用于管理和应用“用户样式”,可定制浏览体验,作者列举了多种使用 Stylus 的方式。
关键信息:

  • 能分享和使用共享样式,作者仅使用自己写的样式,可应用于所有站点、特定子域等,每个样式顶部注明匹配规则。
  • 大量规则是对字体的微调,作者对字体有自己的看法并通过 Stylus 表达。
    重要细节:
  • Sign in with Google:隐藏使用“登录用 Google 按钮”的网站上出现的愚蠢的“用 Google 登录”弹出框,规则为#credential_picker_container:has(iframe[src*="accounts.google.com"]) { display: none; }
  • arstechnica.com:去除文章中间的自动播放视频,规则为.ars-interlude-container { display: none; }
  • d-shoot.net:设置更适合阅读的字体和max-width,规则为body { max-width: 640px; font-family: sans-serif; margin: 0 auto; }
  • danluu.com:设置更适合阅读的max-width,规则为body { max-width: 600px; margin: 0 auto; }
  • feedbin.com:将单字形 WMAppleLogo 字体置于字体栈首位,在非苹果设备上正确显示苹果标志,使用 Muli 作为文章字体,规则为.font-default.content-styles { font-family: WMAppleLogo, Muli, sans-serif; }
  • github.com:在 GitHub 上使用默认 sans-serif 字体,覆盖system-ui,规则为body,.markdown-body { font-family: sans-serif; }
  • gkeenan.co:用 Work Sans 替换博客的打字机字体,规则为html { font-family: Work Sans, sans-serif; }
  • goughlui.com:用更漂亮的衬线字体替换默认的 Times New Roman 字体,规则为body, input, textarea,.page-title span,.pingback a.url { font-family: "TeX Gyre Pagella", serif; }
  • lwn.net:用 Source Sans 3 变量字体覆盖 LWN 的字体选择,调整标题字体粗细和文章宽度,规则为body { font-family: SourceSans3VF, sans-serif; } h1,h2,h3, b { font-weight: 600; } DIV.PageHeadline, DIV.ArticleText { max-width: 800px; }
  • news.ycombinator​.com:修复 Hacker News 自发帖中难以阅读的浅灰色文本,规则为/* Make HN post text readable */.toptext { color: #333; }.toptext a { color: #1973c2; }
  • https://okmij.org​/ftp/papers/​DreamOSPaper.html:设置更可读的max-width,规则为body { max-width: 640px; margin: 1em auto; }
  • phanpy.social:使用 Figtree 字体,规则为body { font-family: Figtree, sans-serif; }
  • thingspool.net:设置更可读的max-width,规则为body { max-width: 700px; }
  • wikipedia.org:在桌面端使用‘Lato’字体,规则为html, body { font-family: 'Lato', sans-serif; }
  • www.​bleepingcomputer​.com:使用 Figtree 字体,规则为.bc_main_content p,.bc_main_content li { font-family: Figtree, sans-serif; font-weight: normal; }
  • yeslogic.element.io:使用系统 emoji 字体和 monospace 字体,减少 monospace 文本行高,隐藏“Spaces”栏,规则为body { font-family: Inter, sans-serif; }.mx_EventTile_content.markdown-body code,.mx_EventTile_content.markdown-body pre { font-family: monospace!important; }.mx_EventTile_content.markdown-body pre { line-height: 1.3; } *[aria-label="Spaces"] { display: none; }
阅读 7
0 条评论