微信公众号高级排版指南笔记
语言准备：Markdown基础入门
标题
-
代表标题，最多可叠加至5个#，也就是五级标题
- ===和---添加在文字下方也可标记一级标题和二级标题
段落
- 两次回车创建一个段落
- 强制断行效果可通过shift+回车实现
超链接
- [链接名称] (链接地址) 去掉空格即可
- <链接地址>
图片
- ！ [] (图片链接)
- 推荐图床：极简图床、iPic
列表
- 无序列表 * 空格
- 有序列表 1. 空格
- Tab键可进行缩进
引用块
- “>” 空格
- “>>”可进行多重引用
强调
- 两个**或__包裹实现加粗
- 一个**或__包裹实现倾斜
代码块
- 行内代码块为``包裹在单词前后
- 段落代码块为上下各```包裹在段落前后
分割线
- “---”
- 三个*
- “- - -”
- 三个*+空格
规范准备：公众号排版设计规范
公众号设计规范的要素
- 配色方案
- 价值定位区块
- 导语区块
- 标题区块
- 正文区块
- 强调文本区块
- 行动呼唤区块
配色方案
- 配色方案包括彩色系和无彩色系
- 彩色系一般不使用超过三种色彩
- 彩色系一般使用于标题或强调处
- 无彩色系黑白灰一般选用3-4个梯度
- 无彩色系一般使用在正文和引用文本
价值定位区块
- 提供关于公众号的竞争优势、用户价值等信息
- 通常是关于公众号的一句话简介
- 公式：目标用户+痛点问题+解决方式
- 通常的表现形式为：文章头图/作者名称
导语区块
- 一般用于出现在文章的头部
- 通常用于表现创作背景、写作动机或构造悬念
- 通常的表现形式为：左边框+右缩进
- 在正文中，引用的表现形式和导语通用
标题区块
- 公众号文章标题级别通常不超过三个级别
- 二级标题使用频率最高
- 字体表现形式：放大/加粗/主色
- 对齐方式常见：左对齐/居中
- 其他修饰风格各异，下边框居多
正文区块
- 公众号文章的主体，创建设计氛围的重要载体
- 公众号默认正文字体大小16px
- 公众号默认正文字体颜色值#3e3e3e
- 公众号支持的字体有限，但可自定义
- 正文字体15px、颜色#333333颜色、1.8倍行距可以快速构建一种优雅感
强调文本区块
- 强调文本区块用于突出重点、表明身份等场景
- 具体的表现形式包括加粗、倾斜、加主色、放大、下划线等
- 公众号最常用的两种强调形式为：加粗和加主色
- 外站超链接在公众号图文中无法使用，所以强调文本会与超链接文本混用
行动呼唤区块
- 行动呼唤一般放置于公众号的文末，是所有文章的最终目的
- 常用的形式包括二维码扫描、商业购买、原文链接、相关阅读等
- 通常需要进行额外的图片设计和嵌套
- 二维码扫描的形式会再次加入经过变形的价值定位
样式准备：自定义公众号排版样式
配置公众号自定义渲染样式
配色方案的自定义样式
- 保存配色方案的颜色值
价值定位区块的自定义样式
- 直接插入图片
导语区块的自定义样式
- blockquote分组代表导语区块
- border-left为导语左边黑线的宽度和颜色、soild为实线
- padding代表左边的线和文字的距离,即内边距，1em为一个默认字体的大小
- color为导语的颜色
标题区块的自定义样式
- h2（二级标题）分组代表标题区块
- font-size为字体大小
- border-bottom为标题下方边框的厚度、实线和颜色
正文区块的自定义样式
- wrapper分组代表正文区块
- font-family为英文字体（中文字体无法更改）
- font-size为正文字体大小
- color为正文颜色
- line-height为行高，行与行之间的空隙
- margin为上下、左右空出的距离，即外边距
- text-align为正文的对齐方式
Notes | 公众号 Markdown 排版失效的问题
问题：
学习完课程后，在实践过程中遇到了这样一个问题。当我一键markdown后，排版样式只是临时统一。当我保存后，再次打开，发现排版字体又变回了16px，另外上下左右边距也消失了。
近期微信对公众号后台编辑器做了一些功能的升级和调整，就不再支持 Markdown here中 .markdown-here-wrapper的全局设定。所以如果你需要调整正文的样式，需要改用P标签来进行自定义。
比如你需要调整所有段落文字的边距、字体类型，可以通过在 Markdown Here的渲染代码中对P的代码做如下修改：
p {
margin: 0 0 1.2em 0 !important;
font-family: Avenir, PT-sans !important;
padding: 0.5em 1em !important;
font-size: 14px !important;
line-height: 1.8em;
}
!important在这里的意思就是“强制应用”的意思。
当然在邮件、非微信公众号编辑器等其他地方还是可以正常使用的。
Notes | 如何在自定义微信正文字体
微信上支持的字体有限，这个取决于微信内的浏览器支持那些网页字体，所以最妥当的就是使用它默认的字体(点击“清除格式”)后显示的那一个。
但是根据目前在IOS设备的尝试，支持的中文字体有：平方(PingFangSC)，微软雅黑(Microsoft YaHei)，华文细黑（STHeiti Light）等等，具体的常见字体代号参见：中文网页用什么字体最合适？
那应该如何在Markdown Here中修改呢？我们可以挑选出对应的正文标签P，然后做如下属性声明：
p {
font-family: PingFangSC-regular, "Microsoft YaHei", STXihei, serif;
}
上面之所以有多个字体，主要的规则有三条：
优先使用排在前面的字体。
如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。
如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。
强调文本区块的自定义样式
- strong分组代表强调区块
- color为强调文本颜色
- font-weight为强调字体大小，有light、normal和bold三种大小
行动呼唤区块的自定义样式
- 直接插入图片
- 当最后一句话为引用语时行动呼唤图片也会被引用进去，因此需要提前插入图片避免这种情况
