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里面的。所以。。。并不是每个阅读器都支持。

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值