pdf 目录自定义 css
最新版本的小书匠(4.2.0),提供了目录自定义 css 样式导出。
pdf 导出时带目录的 html 结构，用户可以根据该 html 结构，自定义 css 样式。
- 1<body>
- 2 <div class="h1"></div>
- 3 <ul>
- 4 <li><div class="item"><a href="#">一级标题</a><span>页号</span></div>
- 5 </li>
- 6 <li><div class="item"><a href="#">一级标题</a><span>页号</span></div>
- 7 </li>
- 8 <li><div class="item"><a href="#">一级标题</a><span>页号</span></div>
- 9 <ul>
- 10 <li><div class="item"><a href="#">二级标题</a><span>页号</span></div>
- 11 </li>
- 12 <li><div class="item"><a href="#">二级标题</a><span>页号</span></div>
- 13 <ul>
- 14 <li><div class="item"><a href="#">三级标题</a><span>页号</span></div>
- 15 </li>
- 16 </ul>
- 17 </li>
- 18 <li><div class="item"><a href="#">二级标题</a><span>页号</span></div>
- 19 </li>
- 20 </ul>
- 21 </li>
- 22 </ul>
- 23</body>
示例
目录项自动罗马数字编号
代码
- 1ul {
- 2 counter-reset: section; /* 为每个ol元素创建新的计数器实例 */
- 3 list-style-type: none;
- 4}
- 5li div.item:before {
- 6 counter-increment: section; /* 只增加计数器的当前实例 */
- 7 content: counters(section, ".") " "; /* 为所有计数器实例增加以“.”分隔的值 */
- 8}
效果图
罗马数字编号
中文 + 罗马数字编号
- 1ul ul {
- 2 counter-reset: section;
- 3 list-style-type: none;
- 4}
- 5ul ul>li>div.item:before {
- 6 counter-increment: section;
- 7 content: counters(section, ".") " ";
- 8}
- 9
- 10
- 11body>ul {
- 12 counter-reset: sectioncjk;
- 13 list-style-type: none;
- 14}
- 15body>ul>li>div.item:before {
- 16 counter-increment: sectioncjk;
- 17 content: counters(sectioncjk, ".", cjk-ideographic) "、 ";
- 18}
效果图
中文 + 罗马数字编号
pdf 正文自定义 css 样式
直接通过 小书匠主按钮>设置>基本> 自定义 css 来实现，或者在每篇文章单独的自定义 css 里设置也可以。
如果只想针对 pdf 打印，不想改变原有的预览样式，也可以通过 css 的 print 媒体来实现。比如这样
- 1@media print{
- 2 body{
- 3 font-family: "Microsoft YaHei";
- 4 font-size: 2em;
- 5 }
- 6}
pdf 正文小标题编号
- 1@media print{
- 2body {counter-reset: h1}
- 3 h1{counter-reset: h2}
- 4 h2 {counter-reset: h3}
- 5 h3 {counter-reset: h4}
- 6 h4 {counter-reset: h5}
- 7 h5 {counter-reset: h6}
- 8
- 9 h1:before {counter-increment: h1; content: counter(h1, cjk-ideographic) "、 "}
- 10 h2:before {counter-increment: h2; content: counter(h2) ". "}
- 11 h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
- 12 h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}
- 13 h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
- 14 h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
- 15
- 16
- 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}
pdf 正文修改字体
将正文字体修改成 微软雅黑字体
- 1@media print{
- 2 body{
- 3 font-family: "Microsoft YaHei";
- 4 font-size: 2em;
- 5 }
- 6}
注意
需要注意的是 pdf 联网打印不支持 css 多字体容错回调，只能单独字体指定。
还有就是不支持中文字体名称 ，需要指定英文字体名称，比如 微软雅黑 需要使用它的英文字体名称 Microsoft YaHei