跳至正文

如何自定义 Firefox 阅读器视图以获得更好的可读性

如何自定义 Firefox 阅读器视图以获得更好的可读性

阅读器视图是 Firefox 浏览器的一项流行功能,它改变了网页的外观,并通过消除图像、广告、标题和侧边栏等视觉混乱使其更具可读性。但是,并非所有主页都提供阅读器视图。

如果该功能可用于某个页面,您会在地址栏右侧显示一个小书本图标形状的图标以启用该功能。

图片:Mozilla.org

有一些内置选项允许读者自定义阅读器视图的外观。在向您展示如何进一步个性化阅读器视图的外观之前,我们将查看这些选项。出于演示目的,我将使用国家地理文章中的一篇文章。

预建选项

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 阅读器视图

如果您想深入了解 Firefox 工具的主题定制,请查看我之前关于Firefox Developer Tools 主题定制的教程。

标签: