内嵌字体的EPUB制作全接触

html-css080

内嵌字体的EPUB制作全接触,第1张

    以下内容都是干货,目的是解决部分设备(比如 日版的 sony prs 350 阅读器)上无法显示中文字体的问题。没有此问题,或者对电子书制作不感兴趣的可以不用看了,想要了解一下电子书的制作过程的可以继续。

    先说下原理,很简单, 因为 epub 格式可以使用内嵌字体,那么在阅读器不支持安装调用自己字体的时候,通过 epub 格式的接口可以实现多字体的浏览, 所以问题的关键就在于如何嵌入字体。

    然后,开始,准备工作,因为都是纯软件操作,基本上需要一台电脑,准备好各种软件就行了,这些软件有:

    1,2,3 都是转换工具,1可以独立完成 txt 到 epub 的转换,2和3 配合着用,对其他格式的 epub 进行 css 调整,使之可以使用内嵌字体,4是编辑器。

  下面以《Starting+Over+重启人生》.txt 为样本做一下介绍,这是原文:

    排版算是比较精美的了,但是如果直接放进不支持的设备,显示是这样的。

    事实上,还有一些 txt 档格式存在其他各种问题,比如硬回车,空格格式不统一,缩进等等,需要自己调整一下,也可以用 easypub 改变一部分。

    然后是主菜,上 easypub,其实这是一个很好的电子书转换工具,不光支持 txt 转 epub 现在(1.5)还支持转 .mobi 和 azw3 格式,当然我用的多是 epub 了。

    设置参数:

    根据这个 txt 档的特点,我讲章节的正则规则设置成:^\s*[1234567890]+|^s*后记$,通过“章节编辑”功能,能提前看到划分后的结果。

    嵌入字体的设置:

    然后点执行,看看结果吧:

    很简单吧,唯一复杂一点的就是章节正则表达式的选择。

    下面以 《神曲+(译文名著精选)+-+但丁·阿利吉耶里+朱维基译.epub》为例子来说明,以下是原文(583K)

    如果在电子书上看,又遇到设备不支持自定义字体的情况,就和前面讲的一样,都是方框,我们先尝试一下,能否替换为内置字体,运气好的话,是用老牛字体css的电子书,可以一步进行转换。

    是否有运气?

    不能通过,看来原来的 css 并不是老牛样式,必须还有做一次转换!当然,你可以用 Sigil 进行手动调整,还有简单的办法!

    这次我们请出 老牛的作品 cssStar

进行转换的设置:

注意其中最重要的设置,替换 css 为老牛样式,然后。

再次请出  fontRepack 。。。

转换成功,因为《神曲》字体结构比较复杂,还是缺两个生僻字,不过已经可以看了。

最后简单说一下,Sigil 编辑功能,嗯,基本上就是提一下。

    就这样简单说一下 Sigil 的基础修改功能,那么就愉快地结束吧,如果对自己制作的电子书不满意,需要更深度的修改,就需要对 Sigil 进行更深入的学习了,这不是这篇文章的主要目的,有期望的话说不定下次会提一下,哈哈,其实我也算是  Newbie。

全屏式的页面非常不适合响应式布局:

公众号:jkypxsl

由于缺乏经验,当初选择用全屏滚动的响应式布局写博客,实践中发现由于ipad以及手机端的横屏竖屏模式的存在,而全屏模式又使每一帧成为一屏幕,这样对宽度与高度有着严格的比例要求,在如今手机款式五花八门的形态下,这种一帧要把所有内容全部展示出来的,可能只适合信息量比较少的页面吧....

4.响应式css方面注意的问题:

在@media screen and (max-width||min-width)样式区分截点的格式必须严格遵守,任何一个空格问题都会造成显示错误.

将越小的设备css存越下面,不然会给你带来麻烦.并且响应式页面最小字体为12px.

将谷歌浏览器的控制台放置在页面右边显示,这样大大提高响应式布局css的书写效率.

rem单位最好的换算比例为625%,62.5%的换算会有误差,特别是在pc端.

在高度范围下有时候用px去写死是不错的选择

5.js网页部分:

对于5张网页展示图左右切换,由于上次bilibili经验,老牛第一时间就想到了用insertAfter函数去控制图的定位是最好的选择,事先把对应div容器用css样式写好,那么在左右切换图层的时候只要把对于的第一张图或是最后一张图的节点位置进行调整,配合上transition属性,这样无论是在代码量以及性能上都是最好的选择之一,唯一不足的就是兼容问题.这部分的重点在于焦点容器(最中间的)点击是进行连接,左右两张图点击则是移动,老牛思前想后,最后决定事先将所有的连接地址用数组存起来,由于目标层节点的index一直在改变,所以在初始化的时候就预先给每个容器加上其对应的class名+index值(这样在之后无论节点如何变化,这个初始的class名中保留下的index值能与对应的链接挂钩,不过现在让我做的话可能我会选择用data去保存),接下来全局用一个index值来控制焦点位子,每次移动把焦点位子加上用正则匹配class得来的链接地址,而其他的则去掉链接地址.

6.特效部分3d旋转轮播:

如果光光为了实现一个3d旋转不算什么难事,但是由于手机端的存在,3d旋转在pc端竖直切割,而手机端将会横向切割,并且所有的宽长度参数由于响应式的介入将都成为不确定因素,几乎所有的值都是未知数,所以这部分的计算算是烧了我不少的脑细胞

由于内容太多,这里我就不多说了,重点代码部分如下,有兴趣的可以与我交流探讨~值得注意的是,由于所有长宽不能写死都需要计算而得,js在运算过程中小数点的误差让我吃尽苦头...不过要是现在我可能会选择用flex盒模型属性去做!