epub设置着重号

epub设置着重号

开头感谢zc，他的互联网分享精神让我学会了多种epub着重号的制作方法。这里将它同样分享出来。一直分享学到的东西，就不怕某一天别人超越你吗。哈哈。不会啊，因为我也在进步啊。

使用css中使用伪元素实现

由于html里面没有伪元素，只有css里面有。我们通过css来设置伪元素。

步骤1：把要加着重号的汉字一个字一个字用<em></em>标签包装起来。然后它默认是字体斜体，我们把它改为正常。在css里写em{font-style: normal;}

步骤2：添加伪元素。即在代码css中写em::after{content:”.”;}现在的效果就是字后面出现着重号啦。

步骤3：在em::after里面加入position:absolute;left:0;top:1em;这里两个数值要自己根据显示效果调。这样，我们就实现啦~

 

tips:

1,有些阅读器不支持伪元素。有些虽然支持，但是position属性都不一样，效果不好。字体放大一点还能看，再大点儿就错位了。

2,如果受到首行缩进等文本调整，着重号位移不对应现象会发生。在外层加个span比较好一点。

3，一个字一个字添加标记比较麻烦的话，可以在查找里面输入.然后<em>\0</em>。效果就是正则表达式实现在选中字外面加em标签呗~

使用图片的形式实现

首先我们要做一个图片，是一个小黑点，然后外面描边用白色。（这样夜间模式开启的时候也能看见这是个着重号）。背景色透明，跟字重合，然后往下调到合适的距离就行啦。然后给一个点弄成一个字符的大小，平铺图片，就是一连排的着重号。

步骤1，做黑点。要求看上面。

步骤2，用一个标签em把你要添加的文字都加入。

步骤3，修改em的css样式。

em{

font-style:normal;           //把字体从斜体改成正常的

background:url(“../地址自己写” leftbuttom repeat-x);   //调整到左对齐下方。然后重复平铺

padding.bottom: 1em;         //添加边距的底。按显示效果调整。

background-size:1em 1em;  //调整背景大小是1个字符。使之跟字符一一对应。em内联元素没有高度属性，写上去没有用哟~

-moz-background-size:1em 1em; 

-webkit-background-size:1em 1em; //获得更多的支持-  -。。。这个background-size是css3里面的。所以。。。并不是每个阅读器都支持。

}