Skip to content

Latest commit

 

History

History
151 lines (117 loc) · 4.12 KB

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

File metadata and controls

151 lines (117 loc) · 4.12 KB
title tags createDate updateDate grammar_cjkRuby slug
2017-9-24 小书匠 pdf 导出自定义 css 教程
pdf, 导出, css,小书匠
2017-09-24
2017-09-24
true
/export_pdf_by_custom_css

[toc!?direction=lr&root=自定义 css 的pdf导出]

pdf 目录自定义 css

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

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

<body>
    <div class="h1"></div>
    <ul>
        <li><div class="item"><a href="#">一级标题</a><span>页号</span></div>
        </li>
        <li><div class="item"><a href="#">一级标题</a><span>页号</span></div>
        </li>
        <li><div class="item"><a href="#">一级标题</a><span>页号</span></div>
            <ul>
                        <li><div class="item"><a href="#">二级标题</a><span>页号</span></div>
                        </li>
                         <li><div class="item"><a href="#">二级标题</a><span>页号</span></div>
                                <ul>
                                         <li><div class="item"><a href="#">三级标题</a><span>页号</span></div>
                                        </li>
                                </ul>
                        </li>
                         <li><div class="item"><a href="#">二级标题</a><span>页号</span></div>
                        </li>
            </ul>
        </li>
    </ul>
</body>

示例

目录项自动罗马数字编号

代码

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

效果图

罗马数字编号

中文 + 罗马数字编号

ul ul {
  counter-reset: section; 
  list-style-type: none;
}
ul ul>li>div.item:before {
  counter-increment: section; 
  content: counters(section, ".") " "; 
}


body>ul {
  counter-reset: sectioncjk;
  list-style-type: none;
}
body>ul>li>div.item:before {
  counter-increment: sectioncjk; 
  content: counters(sectioncjk, ".", cjk-ideographic) "、 "; 
}

效果图

中文 + 罗马数字编号

pdf 正文自定义 css 样式

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

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

@media print{
	body{
	font-family: "Microsoft YaHei";
	font-size: 2em;
	}
}

pdf 正文小标题编号

@media print{
body {counter-reset: h1}
  h1{counter-reset: h2}
  h2 {counter-reset: h3}
  h3 {counter-reset: h4}
  h4 {counter-reset: h5}
  h5 {counter-reset: h6}

  h1:before {counter-increment: h1; content: counter(h1, cjk-ideographic) "、 "}
  h2:before {counter-increment: h2; content: counter(h2) ". "}
  h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
  h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}
  h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
  h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}

  
  h1.story_title:before,h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before { content: ""; counter-increment: none } 
}

pdf 正文修改字体

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

@media print{
	body{
	font-family: "Microsoft YaHei";
	font-size: 2em;
	}
}

注意

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

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