如何编辑 Firefox 阅读器视图的 CSS / 样式答案

【问题标题】：How to edit CSS / Styling of Firefox Reader View如何编辑 Firefox 阅读器视图的 CSS / 样式
【发布时间】：2019-02-01 15:57:00
【问题描述】：

我想在 Firefox 阅读器视图样式中包含我选择的字体。

如果 Firefox 使用本地 CSS 文件进行样式设置或者它位于其他位置，请告诉我？

此外，Firefox 用于阅读器视图的 CSS 文件名是什么以及如何编辑它。

提前致谢！

【问题讨论】：

不是读者认为内容是在没有开发人员干预的情况下呈现的重点吗？包含一个 css 文件 aboutReader.css。更合适的是问一个关于它自己的项目的问题 => github.com/mozilla/readability

标签： css firefox styling firefox-reader-view

【解决方案1】：

您可以在路径下找到“Firefox 阅读器视图”的 CSS 文件 cd /home/$USER/.mozilla/firefox/<PROFILE_FOLDER>/chrome/userContent.css 仅当您已经进行了设置：

在您的 Firefox URL 搜索栏中输入：about:support。
选择Show Folder，打开您的个人资料文件夹。
在您的配置文件文件夹中创建一个名为chrome的新文件夹。
导航到chrome 并创建一个名为userContent.css 的新纯文本文件
根据您的 CSS 偏好编辑 userContent.css。
在新的 Firefox 配置文件中，从 Firefox 69 开始，您还必须在 about:config 中启用 toolkit.legacyUserProfileCustomizations.stylesheets，参见。 Firefox 69: userChrome.css and userContent.css disabled by default。

在我的例子中，它看起来像下面这样：

cd /home/$USER/.mozilla/firefox/<PROFILE_FOLDER>/
mkdir chrome
cd ./chrome
touch userContent.css

CSS 示例：

@-moz-document url-prefix("about:reader") {
  body.dark {
    color: salmon !important;
    background-color: black !important;
  }
  body.light {
    color: #222 !important;
    background-color: #EEE !important;
  }
  body.sepia {
    color: #5B4636 !important;
    background-color: #F4ECD8 !important;
  }

  body.serif {
    font-family: serif !important;
  }
  body.sans-serif {
    font-family: sans-serif !important;
  }
}

更多解释请参见this Reference。

【讨论】：

如果我在 Windows 上怎么办？
在新的 Firefox 配置文件中，从 Firefox 69 开始，您还必须在 about:config， 中启用 toolkit.legacyUserProfileCustomizations.stylesheets。 Firefox 69: userChrome.css and userContent.css disabled by default.
@mach：这似乎不再起作用：userContent.css 被忽略。太糟糕了，因为默认打字机字体在某些屏幕上不可读。

【解决方案2】：

您不需要添加或更改.css，请按照以下步骤操作：

在地址栏中输入about:config，然后点击按钮接受风险。
在搜索框中，输入或粘贴新的首选项名称：pdfjs.viewerCssTheme
双击编辑并将值设置为 2 以获得深色主题，然后单击蓝色复选标记按钮以保存更改。（0 = 默认，1 = 浅色）。

【讨论】：