自定义样式，使用浏览器阅读epub格式的电子书

Posted 2021-01-15 ricksteves

epub格式的电子式一般用专门的阅读器打开，但是如果可以使用浏览器打开，就可以随意更改css了，获得极致的体验效果。

比如可以自定义字体、行间距、背景色、字体大小、缩进等等...

当然，如果您不需要添加翻页按钮，请跳过第二、三步，直接进行第四步也可以。

效果如下：

一、使用解压软件将epub格式的电子书解压到特定的文件夹，解压后一般为html格式。

二、将文件重命名，以数字方式命名，并从1开始编号，可以使用bat批处理文档，去除重命名后的括号，只留下数字，方面下一步翻页时计算页面。

1、首先把文件全部选中，然后右键，选择重命名，这里注意，直接将原来文件名删除即可，不需要输入任何字符（或者输入你自己喜欢的名称），之后，就被重命名为这种形式了  (1).html，  (2).html，  (3).html，.........2、将如下代码拷贝到任一个记事本文件里面，将记事本后缀改为.bat，注意一定是真正的后缀是.bat，有的人改完之后是.bat.txt，这样是没有效果的

1 @Echo Off&SetLocal ENABLEDELAYEDEXPANSION
2 FOR %%a in (*) do (
3 set "name=%%a"
4 set "name=!name: (=!"
5 set "name=!name:)=!"
6 ren "%%a" "!name!"
7 )
8 exit

 

3、双击执行批处理即可。你会发现你的名称里面的“（”，“）”都被去掉了。

三、在html页面中添加“上一页”，“下一页”按钮。

将代码插入</body>之前，可以使用 notepad批量替换</body>字符。

代码：

<script language="javascript">
<!--var strHref = window.location.href;
var pageName = strHref.slice(strHref.lastIndexOf("/")+1);
var pageNumber=parseInt(pageName.replace(".html",""));
function forward()
{var aa=pageNumber-1;window.location.href=aa+".html";}
function back()
{var bb=pageNumber+1;window.location.href=bb+".html";}
//-->
</script>
<div>
<div class="fanye1"><input type="button" value="上一页" onclick="forward()"></div>
<div class="fanye2"><input type="button" value="下一页" onclick="back()"></div>
</div>

四、在浏览器页面加入CSS样式，获得自定义的阅读效果。

我的css是从https://ebooks.adelaide.edu.au/meta/titles/A.html这个在线书籍网站的页面复制下来的，稍作更改，直接放到解压后的书籍目录下，如下图的stylesheet.css。替换原来解压后的main.css 文件。

 

我的stylesheet.css

https://files.cnblogs.com/files/ricksteves/stylesheet.css

（如需使用我的css，请右键以上链接目标另存为下载）

使用浏览器阅读的好处是显而易见的，英文书籍直接配合欧路词典，划词取义。

最后是效果图：