如何自定义 Firefox 阅读器视图以获得更好的可读性
阅读器视图是 Firefox 浏览器的一项流行功能，它改变了网页的外观，并通过消除图像、广告、标题和侧边栏等视觉混乱使其更具可读性。但是，并非所有主页都提供阅读器视图。
如果该功能可用于某个页面，您会在地址栏右侧显示一个小书本图标形状的图标以启用该功能。
有一些内置选项允许读者自定义阅读器视图的外观。在向您展示如何进一步个性化阅读器视图的外观之前，我们将查看这些选项。出于演示目的，我将使用国家地理文章中的一篇文章。
预建选项
Firefox Reader View 带有一些预置的自定义选项，例如深色、浅色和棕褐色背景、可调整的字体大小以及衬线和无衬线字体。您可以通过覆盖这些预先存在的选项的CSS 规则来自定义主题。
我使用带有衬线字体的深色皮肤，这意味着我需要覆盖所属的 CSS 类，在我的例子中.dark是.serif.
如果您想自定义另一个主题变体（皮肤+字体），您将需要使用适当的 CSS 选择器。您可以通过点击F12在 Firefox 开发者工具的帮助下检查这些。
创建自定义 CSS 文件
您需要在Firefox 配置文件文件夹的文件夹userContent.css内创建一个名为的文件，用于您的阅读器视图自定义。要找到您的 Firefox 配置文件文件夹，请在 URL 栏中键入并按Enter 键。chromeabout:support
您会发现自己所在的页面包含与您的 Firefox 安装相关的技术数据。单击“显示文件夹”按钮，它将打开您的个人资料文件夹。
在您的个人资料文件夹中创建一个名为的文件夹chrome（如果您还没有），并userContent.css在该chrome文件夹中创建一个名为的文件。文件路径如下所示：
|
1个
|
...\Profiles\<your-profile-folder>\chrome\userContent.css |
添加自定义 CSS 规则
在代码编辑器中创建并打开后userContent.css，就可以添加 CSS 规则了。为了自定义阅读器视图的设计，您需要使用适当的选择器来定位<body>标签。
您可以将以下选择器用于不同的默认选项：
|
1个
2个
3个
4个
5个
6个
7
8个
9
10
11
12
13
14
15
|
/* When dark background is selected */:root[hasbrowserhandlers="true"] body.dark {}/* When light background is selected */:root[hasbrowserhandlers="true"] body.light {}/* When sepia background is selected */:root[hasbrowserhandlers="true"] body.sepia {}/* When serif font is selected */:root[hasbrowserhandlers="true"] body.serif {}/* When sans-serif font is selected */:root[hasbrowserhandlers="true"] body.sans-serif {} |
您还可以组合这些类，以针对特定的设置组合。
|
1个
2个
3个
4个
5个
6个
|
/* When dark background and serif font are selected */:root[hasbrowserhandlers="true"] body.dark.serif {}/* When sepia background and sans-serif font are selected */:root[hasbrowserhandlers="true"] body.sans-serif.sepia {} |
不要使用公共选择器:root[hasbrowserhandlers="true"] body一次定位所有设置。它会起作用，但它也会影响其他浏览器页面，例如about:newtab，因为它们的根元素也带有该hasbrowserhandlers属性（用于标记 Firefox 内部页面的事件处理程序，例如about:pages）。
这是我添加到我的 userContent.css. 我更改了字体系列、字体样式、颜色，并加宽了文本容器。您可以根据自己的喜好使用任何其他样式规则。
|
1个
2个
3个
4个
5个
6个
7
8个
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
/** userContent.css***************************/:root[hasbrowserhandlers="true"] body.dark.serif,:root[hasbrowserhandlers="true"] body.dark.serif #reader-domain {font-family: "courier new" !important;}:root[hasbrowserhandlers="true"] body.dark.serif {background-color: #13131F !important;color: #BAE3DB !important;}:root[hasbrowserhandlers="true"] body.dark.serif #reader-domain {font-style: italic !important;}:root[hasbrowserhandlers="true"] body.dark.serif h1,:root[hasbrowserhandlers="true"] body.dark.serif h2,:root[hasbrowserhandlers="true"] body.dark.serif h3,:root[hasbrowserhandlers="true"] body.dark.serif h4,:root[hasbrowserhandlers="true"] body.dark.serif h5 {color: #06FEB0 !important;}:root[hasbrowserhandlers="true"] body.dark.serif a:link {color: #83E7FF !important;}:root[hasbrowserhandlers="true"] body.dark.serif #container {max-width: 50em !important;} |
请注意，有必要对所有 CSS 规则!important使用关键字 in 。浏览器在作者指定的值之前添加用户指定的属性值（给定网页的开发人员，此处为阅读器视图）。因此，如果作者指定的样式表也以相同的属性为目标，则任何不带关键字的用户指定的属性值都将不起作用，因为它将被覆盖。userContent.css !important
最后结果
您可以在下面看到我的阅读器视图主题的变化。使用您自己的 CSS 规则来定制您自己的个性化 Firefox 阅读器视图的设计。
前
后
如果您想深入了解 Firefox 工具的主题定制，请查看我之前关于Firefox Developer Tools 主题定制的教程。