企业官网建设流程全解析

简介：这份 Typora 中文学术风格主题面向撰写论文、报告与长文档的中文学术用户，在官方 Academic 主题基础上调整正文与等宽字体，正文采用华文中宋，等宽字体采用 CamingoCode，并强化代码块外边框样式，适合追求严谨排版与舒适阅读的写作者替换使用。资源包共 14 个文件，含 2 个 CSS 样式、8 个 woff 字体、2 个 PDF 许可说明及 1 个 TXT、1 个 MD 说明，整体约 15.46MB，字体与样式分离，便于按需启用和二次修改。已有 453 人学习，说明其在学术写作场景中具备一定参考价值。读者可获得一套可直接落地的中文 Typora 主题，理解 Academic 风格的字体搭配逻辑，并借助代码块外框、右对齐与居中对齐等方式，改善论文与技术文档中的公式、示例代码与版式呈现，对公式、代码与中文段落混排较友好，能减少长文写作中的版式调试成本。

1. 交稿前夜被格式打回：这套中文学术 CSS 到底改了什么

用 Typora 写完一章，导出 PDF 一看：段首不缩进，标题层级没有编号，图表题注跟正文一个字号，参考文献的悬挂缩进全散。内容没问题，格式被批注「像网页不像论文」。这套 Typora-Academic-Zh 干的就是这件事：用一组 CSS 覆盖 Typora 默认主题，把中文学术排版里那些手动调不完的规则固化成样式。它不是插件，不改变 Markdown 语法，装的是academic-zh.css这类主题文件；核心是选择器和打印样式。适合用 Markdown 写课程报告、论文初稿、技术文档，最后要交 PDF 的人；也适合想改主题但不知道从哪个选择器下手的熟手。下面按「拆文件、装进去、调四件事、排五个坑」走一遍。

2. 拆开 academic-zh.css：从 #write 到标题层级的五个选择器

2.1 主题文件清单与加载顺序

拿到压缩包先别急着往主题目录里拖，先把文件结构看清楚。常见结构是一个主 CSS、一个可选的暗色 CSS、一个字体目录和一份说明文件。不同版本可能多一个打印样式文件，也可能把打印规则直接写在主 CSS 的@media print里。文件名不一定叫academic-zh.css，以压缩包实际文件名为准；下面用这个名字代指主主题文件。

Typora 加载主题时有一套固定顺序：内置基础样式先加载，然后加载当前选中的主题 CSS，最后加载与主题同名的[theme].user.css。这意味着你不需要直接改academic-zh.css，把想调的参数写进academic-zh.user.css就能覆盖，升级主题时也不会把修改冲掉。主题 CSS 顶部通常用:root定义一组变量，正文、标题、代码块都引用这些变量，调参入口比较集中。

/* 主题顶部的变量区，变量名以实际文件为准 */ :root { --academic-font-body: "SimSun", "Songti SC", serif; --academic-font-heading: "SimHei", "Heiti SC", sans-serif; --academic-font-mono: "Consolas", "Menlo", monospace; --academic-body-size: 12pt; --academic-body-leading: 1.8; --academic-indent: 2em; }

这段逻辑是把字体、字号、行高、缩进从具体规则里抽出来，后面改一处就能影响全局。pt用于打印场景，10.5pt 接近五号字，12pt 接近小四；1.8是无单位行高，表示字号的 1.8 倍；2em相对当前字号，正好是两个汉字宽度。字体栈从具体字体写到通用族名，前一个找不到就往后落，最后用serif或sans-serif兜底。不要一上来把字体栈写成单一字体名，换一台机器很容易翻车。

2.2 从 #write 到标题层级：选择器怎么写

Typora 的编辑区容器是#write，侧边栏、文件列表、偏好设置这些界面元素不在这个容器里。学术主题的所有排版规则都应该挂在#write下面，否则暗色模式、侧边栏、导出预览容易被误伤。下面这段是正文和标题的骨架，实际文件里可能拆得更细，但选择器层级基本是这个思路。

/* 正文区域：控制行宽、字体、字号、行高和对齐 */ #write { max-width: 46em; margin: 0 auto; font-family: var(--academic-font-body); font-size: var(--academic-body-size); line-height: var(--academic-body-leading); color: #1a1a1a; text-align: justify; } /* 标题统一走黑体类字体，字号逐级递减 */ #write h1, #write h2, #write h3, #write h4 { font-family: var(--academic-font-heading); font-weight: 700; line-height: 1.35; margin: 1.6em 0 0.8em; text-align: left; text-indent: 0; } #write h1 { font-size: 1.8em; } #write h2 { font-size: 1.5em; } #write h3 { font-size: 1.25em; }

这段的逻辑是先把编辑区收窄到适合阅读的行宽，再给标题单独一套字体和间距。max-width: 46em不是固定像素，字号变了行宽会跟着变，中文字符大约一行 46 字，A4 纸上比较舒服。margin: 0 auto让编辑区居中，预览时两侧留白；text-align: justify两端对齐，中文段落看起来更整齐，但英文长单词可能被拉开，技术文档里可以改回left。

参数上重点看三个地方。line-height: 1.35是标题行高，比正文紧，防止多行标题散开；margin: 1.6em 0 0.8em是标题上下的呼吸空间，上边距大于下边距，标题和它下面那段正文更近，层级关系更清楚；text-indent: 0必须写，因为正文如果设了首行缩进，标题会继承，一级标题也跟着缩进两格，看起来像正文。标题字号用em而不是rem，避免 Typora 根字号变化时整篇比例失控。

2.3 变量表与调参入口

调参不要从颜色开始，先把字号、行高、缩进、标题字重这四项定下来，再考虑表格边框和代码块底色。下面这张表是常用变量和它们影响的范围，实际变量名可能不同，但含义大差不差。

覆盖文件建议单独建一个academic-zh.user.css，和主主题放在同一个主题文件夹。文件名必须和主题文件名对应，主主题叫academic-zh.css，覆盖文件就叫academic-zh.user.css。下面这段只改正文尺寸、行宽和左右内边距，不动主题原文件。

/* academic-zh.user.css：只覆盖需要微调的参数 */ :root { --academic-body-size: 10.5pt; --academic-body-leading: 1.75; --academic-indent: 2em; } #write { max-width: 44em; padding: 0 2.2cm; }

这段的逻辑是用变量覆盖字号和行高，再用#write单独收窄行宽、加左右内边距。padding: 0 2.2cm是预览时的左右留白，不等于打印页边距；打印页边距要在@media print里的@page单独设，后面会讲。max-width: 44em比默认的 46em 窄一点，表格多的文档可以改回 48em。

参数上注意10.5pt和12pt的差别在导出 PDF 时最明显，预览时因为屏幕缩放，很多人感觉不出来。1.75的行高适合五号字，小四字可以到1.8。2em的缩进在字号变化时会自动跟着变，不要写成24px这种固定值。覆盖文件里尽量少用!important，一旦用多了，后面想再覆盖就得加更多!important，维护起来很麻烦。

提示：改主题前先把原academic-zh.css复制一份备份，或者只动academic-zh.user.css。直接改主文件不是不行，但主题一升级，修改就容易被覆盖。

3. 装进 Typora：主题目录、user.css 覆盖与三组参数

3.1 复制安装与主题切换

安装步骤不复杂，难的是别放错目录。打开 Typora 的偏好设置，找到「外观」，点「打开主题文件夹」，系统会直接跳到正确位置，不需要自己记路径。把academic-zh.css和可选的fonts/目录复制进去，重启 Typora，在「主题」菜单里选对应名称。菜单显示的是文件名去掉.css后的名字，所以文件名不要随便改，尤其不要改大小写，有些系统区分大小写，改完菜单里可能就找不到了。

复制完先确认扩展名。常见翻车是文件实际叫academic-zh.css.txt，资源管理器隐藏了已知扩展名，看着像 CSS，其实是文本文件。用文件管理器打开「显示文件扩展名」，或者在终端里列一下目录，确认是.css结尾。下面这条命令只是确认文件存在和扩展名，不涉及具体路径，在主题文件夹里执行即可。

# 在主题文件夹内确认主样式和暗色样式存在 ls -l academic-zh.css academic-zh-dark.css

这段的逻辑是用ls -l看文件名、扩展名和修改时间，确认复制的是 CSS 而不是压缩包里的快捷方式。-l会多打一列权限和大小，不影响判断。如果系统提示找不到文件，先确认当前目录是不是主题文件夹，再看文件名有没有多余后缀。暗色样式是可选的，没有也不影响主主题使用。

安装方式其实有三种，适合不同阶段。直接复制主 CSS 最简单，适合第一次试；用academic-zh.user.css覆盖适合长期调参；临时在开发者工具里改样式适合找选择器，但不适合作为最终方案，因为重启就没了。下面这张表是三种方式的取舍。

3.2 用 user.css 做覆盖，不动原文件

覆盖文件的核心是「只写差异」。主题已经把大部分规则写好了，你只需要把想改的变量和少数选择器重新赋值。下面这段是一个比较完整的覆盖模板，包含正文、标题、表格和代码块四个入口，实际使用时按需删减。

/* academic-zh.user.css：按差异覆盖，不重复主题已有规则 */ :root { --academic-body-size: 10.5pt; --academic-body-leading: 1.75; } #write { max-width: 45em; padding: 0 2cm; } #write h1, #write h2, #write h3 { font-family: "SimHei", "Heiti SC", sans-serif; font-weight: 700; text-indent: 0; } #write table { font-size: 0.92em; line-height: 1.5; } #write pre, #write .md-fences { font-size: 0.9em; line-height: 1.55; }

这段的逻辑是把最常调的四类元素单独拎出来：正文控行宽和字号，标题控字体和缩进，表格控字号和行高，代码块控字号和行高。#write table和#write .md-fences都限定在编辑区内，不会影响侧边栏。表格字号用0.92em比正文小一点，代码块用0.9em，都是相对正文缩放，正文改字号时它们会跟着变。

参数上注意表格行高不要低于1.4，否则中文表格里的字会贴边；代码块行高可以到1.55，比正文紧一点，一屏能多看几行。padding: 0 2cm是预览留白，如果导出 PDF 后发现左右边距不对，不要在这里加，去改@page的margin。标题字体用系统自带黑体类字体，不要硬写一个没安装的字体名，否则会回退成默认字体，标题和正文看起来一样。

注意：academic-zh.user.css不是所有旧版本都支持，如果放进去没反应，先确认当前 Typora 版本是否读取同名覆盖文件。不支持时再直接改主 CSS，但一定要备份。

3.3 字体与行距的三组参数怎么定

字号、行高、缩进这三组参数没有唯一正确答案，但有三套常用组合。课程报告通常要求正文小四、行距 1.5 倍左右；论文初稿常用五号、行距 1.75 到 1.8；技术文档可以稍小，但行高不能太挤。下面这张表是常见场景的起点，具体以学校或单位规范为准。

字体安装是另一个容易忽略的点。如果主题里用了本地fonts/目录的字体，导出 PDF 的机器也要能访问这些字体，否则 PDF 里会回退。更稳的做法是正文用系统自带宋体类字体，标题用系统自带黑体类字体，代码用等宽字体。下面这段是字体栈的写法，从具体字体到通用族名，逐级回退。

/* 字体栈：具体字体优先，通用族名兜底 */ #write { font-family: "SimSun", "Songti SC", serif; font-size: 10.5pt; line-height: 1.75; text-indent: 2em; } #write h1, #write h2, #write h3, #write h4 { font-family: "SimHei", "Heiti SC", sans-serif; text-indent: 0; } #write code, #write pre { font-family: "Consolas", "Menlo", monospace; }

这段的逻辑是正文走衬线字体，标题走无衬线字体，代码走等宽字体，三类字体各司其职。text-indent: 2em写在#write上会继承，所以标题、列表、代码块、表格都要单独重置为 0，否则会连锁缩进。serif、sans-serif、monospace是通用族名，前面的具体字体找不到时由系统决定回退字体。

参数上注意10.5pt在小屏幕上预览会显得小，这是正常的，打印出来是五号字。行高1.75是折中值，低于1.6中文段落会显得密，高于1.85一页装不了多少字。首行缩进2em不要改成2ch，ch是数字 0 的宽度，中文场景不如em直观。字体栈里不要塞太多字体名，三到四个足够，塞多了反而不好判断到底命中了哪一个。

4. 中文学术排版四件事：缩进、编号、题注、参考文献

4.1 首行缩进只作用于正文段落

首行缩进是中文排版里最容易写错的一处。直接给#write p加text-indent: 2em看似能工作，但列表项里的段落、引用里的段落、表格单元格里的段落都会跟着缩进，代码块如果被包在p里也会中招。正确做法是先给正文段落加缩进，再把不该缩进的子元素重置为 0。

/* 正文段落首行缩进两字符 */ #write p { text-indent: 2em; margin: 0.4em 0; } /* 列表、引用、表格、代码块内部不缩进 */ #write li p, #write blockquote p, #write table p, #write .md-fences p, #write .md-table p { text-indent: 0; } /* 列表项本身也不缩进，缩进交给列表标记 */ #write ul, #write ol, #write li { text-indent: 0; }

这段的逻辑是「先继承再重置」：#write p把缩进传给所有段落，后面几组选择器把列表、引用、表格、代码块里的段落拉回 0。#write li p的优先级比#write p高，能覆盖继承值。列表项li本身也重置，避免列表标记和文字之间出现多余空白。

参数上2em是两个汉字宽度，随字号变化，10.5pt 正文下大约是 21pt。margin: 0.4em 0是段间距，有首行缩进时段间距不要太大，否则段落之间空得太开，反而不像论文。如果发现引用块第一行也缩进了，检查blockquote p有没有写；如果表格单元格里的文字缩进，检查.md-table p有没有覆盖到。

提示：Typora 的源码模式里，段落之间空一行不会产生额外空段落，缩进由 CSS 控制，不要为了缩进手动敲空格，导出后会对不齐。

4.2 标题自动编号的 CSS counter 写法

学术排版里标题编号可以用 CSS counter 自动生成，不用在 Markdown 里手写「1.」「1.1」。思路是在#write上重置二级计数器，每个h2重置三级计数器，然后用::before把编号插到标题前面。下面是一段两级编号的写法。

/* 在编辑区重置二级标题计数器 */ #write { counter-reset: h2counter; } /* 每个二级标题重置三级计数器 */ #write h2 { counter-reset: h3counter; } /* 二级标题前插入 1、2、3 */ #write h2::before { counter-increment: h2counter; content: counter(h2counter) " "; } /* 三级标题前插入 1.1、1.2 */ #write h3::before { counter-increment: h3counter; content: counter(h2counter) "." counter(h3counter) " "; }

这段的逻辑是计数器跟着标题出现顺序走：第一个h2让h2counter变成 1，同时把h3counter重置；它下面的h3从 1 开始递增，插出来就是「1.1」。第二个h2把h2counter加到 2，h3counter再次重置，编号变成「2.1」。content里的空格是编号和标题文字之间的间隔，不要用margin代替，伪元素里的空格更稳。

参数上注意counter-reset的位置，写在#write上只重置一次，写在h2上每个二级标题都重置三级。counter-increment写在::before里，标题出现一次加一次。编号样式默认是阿拉伯数字，如果要「第一章」这种中文数字，CSS 的cjk-ideographic支持有限，导出效果不稳定，不建议在正式文档里用。

这套写法有一个边界：Typora 左侧大纲显示的是 Markdown 标题原文，不会显示::before插入的编号。也就是说，预览和 PDF 里有编号，大纲里没有。如果学校要求大纲也带编号，只能在 Markdown 里手写编号，然后关掉 CSS counter。两者不要同时开，否则会出现「1 1. 引言」这种重复编号。

4.3 图表题注与参考文献的悬挂缩进

Typora 没有原生的图表题注语法，常见做法是用一段斜体文字模拟题注，再用 CSS 把它变成居中、小字号、不缩进的块。Markdown 里写*图 1 系统结构*，生成的 HTML 是<p><em>图 1 系统结构</em></p>，可以用em:only-child命中「段落里只有一个斜体元素」的情况。

/* 整段只有斜体时，当作图表题注处理 */ #write p > em:only-child { display: block; text-align: center; font-style: normal; font-size: 0.9em; text-indent: 0; margin: 0.3em 0 0.8em; }

这段的逻辑是用display: block把行内斜体变成独立块，text-align: center居中，font-style: normal取消斜体，font-size: 0.9em比正文小一号，text-indent: 0抵消正文缩进。图题注放在图片下方，表题注放在表格上方，这是中文学术排版里比较常见的顺序。

参数上0.9em是相对正文的缩放，正文 10.5pt 时题注大约 9.45pt，接近小五。margin: 0.3em 0 0.8em让题注和上方内容近一点、和下方正文远一点。如果题注没有居中，检查段落里是不是还有别的行内元素，em:only-child只在整个段落只有一个子元素时命中；有多个元素时可以用#write p:has(> em:first-child:last-child)，但对旧渲染内核有兼容性要求。

参考文献的悬挂缩进也是类似思路。Typora 没有专门的参考文献块，常见做法是用引用块>包住每条文献，然后给引用块里的段落加负缩进。下面这段把引用块变成左侧竖线加悬挂缩进。

/* 引用块作为参考文献容器 */ #write blockquote { border-left: 2px solid #999; padding-left: 1em; margin: 1em 0; color: #333; text-indent: 0; } /* 每条文献悬挂缩进：首行突出，后续行缩进 */ #write blockquote p { text-indent: -2em; padding-left: 2em; margin: 0.2em 0; }

这段的逻辑是padding-left: 2em给整段留出左侧空间，text-indent: -2em把首行往左拉 2em，形成「序号顶格、后续行缩进」的悬挂效果。border-left是引用块的竖线，如果参考文献不需要竖线，把border-left改成none，保留内边距即可。

参数上2em对应序号[1]的宽度，序号更长时可以加到2.5em。margin: 0.2em 0让每条文献之间稍微分开，但不要太大，参考文献通常连续排列。引用块里的多个段落都会悬挂，如果只想让某几条悬挂，可以把它们拆成单独的引用块，或者改用 HTML 段落加类名，但后者在 Typora 里写起来更麻烦，日常用引用块足够。

5. 常见问题排查：五个翻车现场与修复顺序

5.1 主题不显示与样式不生效

现象一：主题菜单里找不到新主题。打开主题文件夹，发现文件叫academic-zh.css.txt，或者文件被放在主题文件夹的子目录里。原因是系统隐藏了已知扩展名，复制时又多带了一层后缀；也可能是解压时多套了一个文件夹，CSS 在academic-zh/academic-zh.css，Typora 只扫主题文件夹第一层。解决方法是打开「显示文件扩展名」，把文件名改成.css结尾，再把 CSS 移到主题文件夹根目录。改完重启 Typora，菜单里应该出现对应名称。

现象二：主题能选，但样式只生效一半。标题字体变了，正文行距没变，或者表格还是默认样式。常见原因是academic-zh.user.css里的选择器优先级不够，被主题后面的规则覆盖；也可能是覆盖文件里写了语法错误，导致整段规则被浏览器丢弃。解决方法是先把覆盖文件临时改名，确认主主题本身正常，再逐段加回覆盖规则。CSS 里少一个分号、多一个花括号，后面的规则可能全部失效，这种问题没有报错，只能靠二分法排查。

现象三：换电脑后字体全变了。主题里用了本地fonts/目录的字体，换机时只复制了 CSS，没复制字体目录；或者用了系统没有的字体名，回退到了默认字体。解决方法是把fonts/一起复制，或者在字体栈里把系统自带字体放在前面。更稳的做法是正文和标题都用系统自带宋体类、黑体类字体，代码用等宽字体，减少对外部字体的依赖。

5.2 缩进、编号、分页的连锁问题

现象四：列表、代码块、表格也缩进了。正文段落加了text-indent: 2em，但只写了#write p，没有重置子元素。列表项里的段落、引用里的段落、表格单元格里的段落都继承了缩进，代码块如果被包在段落里也会中招。解决方法是补上#write li p、#write blockquote p、#write table p、#write .md-fences p这几组重置规则，把text-indent设回 0。列表项本身也要重置，缩进交给列表标记，不要让文字再缩两格。

现象五：标题编号重复，或者导出 PDF 后编号消失。重复编号通常是因为 Markdown 里手写了「## 1. 引言」，CSS counter 又插了一个「1」，变成「1 1. 引言」。二选一：要么删掉手写编号，要么关掉 counter。导出后编号消失，先确认@media print里有没有把::before覆盖掉，再看导出的是不是「打印样式」而不是「预览样式」。标题编号和分页也有连锁：h2后面如果紧跟表格，表格可能被挤到下一页，标题留在页底，看起来像编号丢了，其实是分页把内容拆开了。

排查顺序建议从外到内：先确认主题文件被加载，再确认选择器命中，最后确认打印样式。不要一上来就改主 CSS，先用覆盖文件加一条显眼规则测试，比如给#write加一个临时背景色，能看到颜色说明加载链路通了，再继续调具体样式。这样比盲改快得多，也是我踩过几次坑之后固定下来的顺序。

6. 验收与进阶：预览和 PDF 不一致时先查这三处

6.1 一张样张跑完再改正文

改主题最怕拿正文试，改坏了回滚麻烦，还容易把内容格式带乱。我一般会准备一张固定样张，里面放一级标题、三级标题、三段正文、有序列表、表格、代码块、脚注和引用块。每次改完 CSS，先拿这张样张导出 PDF，检查下面三处，再动真实文档。

打印样式单独放在@media print里，和屏幕预览分开调。下面这段是常用补丁：A4 纸、页边距、取消编辑区最大宽度、防止标题落在页底、防止表格和代码块跨页断裂。

/* 打印样式：只影响导出 PDF，不影响屏幕预览 */ @media print { @page { size: A4; margin: 2.5cm 2.2cm; } #write { max-width: none; padding: 0; font-size: 10.5pt; } /* 标题不要单独留在页底 */ #write h2, #write h3 { page-break-after: avoid; } /* 表格、代码块、引用块尽量不跨页 */ #write table, #write pre, #write blockquote { page-break-inside: avoid; } /* 打印时链接不要带颜色和下划线 */ #write a { color: #000; text-decoration: none; } }

这段的逻辑是把屏幕预览和打印输出分开：@page控制纸张和页边距，#write在打印时取消最大宽度，让内容吃满版心；page-break-after: avoid防止标题落在页底；page-break-inside: avoid防止表格和代码块被切成两半。font-size: 10.5pt在打印时用绝对单位，避免屏幕缩放影响。

参数上margin: 2.5cm 2.2cm是上下 2.5cm、左右 2.2cm，具体按学校规范改；size: A4不要漏，否则可能按 Letter 输出。page-break-inside: avoid对特别长的表格不适用，长表格该跨页还是会跨页，这时只能手动拆表。@page在部分导出路径里支持不完整，最终以实际 PDF 为准，不要只看预览。

从那以后我每次改主题，都先拿一张带三级标题、表格、代码块和脚注的样张导出 PDF，再动正文。希望帮到你。

本文还有配套的精品资源，点击获取