如何自定义 Firefox 阅读器视图以获得更好的可读性
阅读器视图是 Firefox 浏览器的一项流行功能,它改变了网页的外观,并通过消除图像、广告、标题和侧边栏等视觉混乱使其更具可读性。但是,并非所有主页都提供阅读器视图。
如果该功能可用于某个页面,您会在地址栏右侧显示一个小书本图标形状的图标以启用该功能。
有一些内置选项允许读者自定义阅读器视图的外观。在向您展示如何进一步个性化阅读器视图的外观之前,我们将查看这些选项。出于演示目的,我将使用国家地理文章中的一篇文章。
预建选项
Firefox Reader View 带有一些预置的自定义选项,例如深色、浅色和棕褐色背景、可调整的字体大小以及衬线和无衬线字体。您可以通过覆盖这些预先存在的选项的CSS 规则来自定义主题。
我使用带有衬线字体的深色皮肤,这意味着我需要覆盖所属的 CSS 类,在我的例子中.dark
是.serif
.
如果您想自定义另一个主题变体(皮肤+字体),您将需要使用适当的 CSS 选择器。您可以通过点击F12在 Firefox 开发者工具的帮助下检查这些。
创建自定义 CSS 文件
您需要在Firefox 配置文件文件夹的文件夹userContent.css
内创建一个名为的文件,用于您的阅读器视图自定义。要找到您的 Firefox 配置文件文件夹,请在 URL 栏中键入并按Enter 键。chrome
about: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 h 1 , :root[hasbrowserhandlers= "true" ] body.dark. serif h 2 , :root[hasbrowserhandlers= "true" ] body.dark. serif h 3 , :root[hasbrowserhandlers= "true" ] body.dark. serif h 4 , :root[hasbrowserhandlers= "true" ] body.dark. serif h 5 { 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 主题定制的教程。