Skip to main content

September 23, 2017

2017-9-24 小书匠 pdf 导出自定义 css 教程

pdf 目录自定义 css

最新版本的小书匠(4.2.0),提供了目录自定义 css 样式导出。

pdf 导出时带目录的 html 结构,用户可以根据该 html 结构,自定义 css 样式。

  1. 1<body> 
  2. 2 <div class="h1"></div> 
  3. 3 <ul> 
  4. 4 <li><div class="item"><a href="#">一级标题</a><span>页号</span></div> 
  5. 5 </li> 
  6. 6 <li><div class="item"><a href="#">一级标题</a><span>页号</span></div> 
  7. 7 </li> 
  8. 8 <li><div class="item"><a href="#">一级标题</a><span>页号</span></div> 
  9. 9 <ul> 
  10. 10 <li><div class="item"><a href="#">二级标题</a><span>页号</span></div> 
  11. 11 </li> 
  12. 12 <li><div class="item"><a href="#">二级标题</a><span>页号</span></div> 
  13. 13 <ul> 
  14. 14 <li><div class="item"><a href="#">三级标题</a><span>页号</span></div> 
  15. 15 </li> 
  16. 16 </ul> 
  17. 17 </li> 
  18. 18 <li><div class="item"><a href="#">二级标题</a><span>页号</span></div> 
  19. 19 </li> 
  20. 20 </ul> 
  21. 21 </li> 
  22. 22 </ul> 
  23. 23</body> 

示例

目录项自动罗马数字编号

代码

  1. 1ul
  2. 2 counter-reset: section; /* 为每个ol元素创建新的计数器实例 */ 
  3. 3 list-style-type: none; 
  4. 4
  5. 5li div.item:before
  6. 6 counter-increment: section; /* 只增加计数器的当前实例 */ 
  7. 7 content: counters(section, ".") " "; /* 为所有计数器实例增加以“.”分隔的值 */ 
  8. 8

效果图

罗马数字编号

罗马数字编号

中文 + 罗马数字编号

  1. 1ul ul
  2. 2 counter-reset: section;  
  3. 3 list-style-type: none; 
  4. 4
  5. 5ul ul>li>div.item:before
  6. 6 counter-increment: section;  
  7. 7 content: counters(section, ".") " ";  
  8. 8
  9. 9 
  10. 10 
  11. 11body>ul
  12. 12 counter-reset: sectioncjk; 
  13. 13 list-style-type: none; 
  14. 14
  15. 15body>ul>li>div.item:before
  16. 16 counter-increment: sectioncjk;  
  17. 17 content: counters(sectioncjk, ".", cjk-ideographic) "、 ";  
  18. 18

效果图

中文 + 罗马数字编号

中文 + 罗马数字编号

pdf 正文自定义 css 样式

直接通过 小书匠主按钮>设置>基本> 自定义 css 来实现,或者在每篇文章单独的自定义 css 里设置也可以。

如果只想针对 pdf 打印,不想改变原有的预览样式,也可以通过 css 的 print 媒体来实现。比如这样

  1. 1@media print{ 
  2. 2 body
  3. 3 font-family: "Microsoft YaHei"
  4. 4 font-size: 2em
  5. 5
  6. 6

pdf 正文小标题编号

  1. 1@media print{ 
  2. 2body {counter-reset: h1} 
  3. 3 h1{counter-reset: h2} 
  4. 4 h2 {counter-reset: h3} 
  5. 5 h3 {counter-reset: h4} 
  6. 6 h4 {counter-reset: h5} 
  7. 7 h5 {counter-reset: h6} 
  8. 8 
  9. 9 h1:before {counter-increment: h1; content: counter(h1, cjk-ideographic) "、 "
  10. 10 h2:before {counter-increment: h2; content: counter(h2) ". "
  11. 11 h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "
  12. 12 h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "
  13. 13 h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
  14. 14 h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
  15. 15 
  16. 16  
  17. 17 h1.story_title:before,h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before { content: ""; counter-increment: none }  
  18. 18

pdf 正文修改字体

将正文字体修改成 微软雅黑字体

  1. 1@media print{ 
  2. 2 body
  3. 3 font-family: "Microsoft YaHei"
  4. 4 font-size: 2em
  5. 5
  6. 6

注意

需要注意的是 pdf 联网打印不支持 css 多字体容错回调,只能单独字体指定。

还有就是不支持中文字体名称 ,需要指定英文字体名称,比如 微软雅黑 需要使用它的英文字体名称 Microsoft YaHei

Tagged with pdf | 导出 | css | 小书匠