您可以在晚上和周六不时更新您的个人号码;你好像是一个新媒体运营商，控制着公司各种账户的推送。
不管你是谁，只要写一个公众号，你一定会注意排版。毕竟，排版是内容的呈现，文章的铺路。
本文解决了哪些问题？
“半小时写作，半天排版”是很多人在写公众号时遇到的问题。
这是为什么呢？因为公众号提供了非常丰富的排版功能，可以调整字体大小，修改颜色，调整对齐方式，每个人都可以发挥自己的智慧和才华，给自己的文章一个独特的排版。
公众号后台的工具栏
此外，市面上还有各种第三方公众号编辑，我不小心把所有的时间都花在了排版上。
相比之下css排版，如今的头条背景，提供的排版功能已经变得非常简单，虽然常用的功能只有几个：设置为标题、粗体、插入图片......您无法更改字体大小，也无法更改颜色。
背景中的标题编号工具栏
这显然是两个产品理念。写一个微信公众号就像亲自发文，各种颜色和图形都可以放在上面;而写标题数字css排版，就像在报纸上写专栏一样，只需要提供文字，排版不是你的责任，报纸有自己的规范。
从写作效率来看，标题方案明显更好。忽略方式并专注于内容可以更有效地生成文章。
因此，建议您花时间以以前文章的风格总结自己的排版规范集。一旦你有了规范，你每次都可以专注于写作。写完后，直接应用排版，就可以发布，非常省时。
如何确定一组排版规范？
1. 确定层次结构
如何在文章正文中定义层次结构？
只要不是在写学术论文，就可以参考标题的方案：用一级标题定义级别就足够了，不需要二级标题和三级标题。
如何突出亮点？粗体就足够了。
确定级别后，下一步是通过为不同级别的文本设置不同的样式来区分它们。
2.文本的风格
正文是一篇文章最大的部分，所以文本中最重要的是“可读性”或“易读性”，让读者可以清晰地阅读而不会感到眼睛疲劳。
文字的字体大小建议为12px~18px。太小看不见，太大看不见。
Apple 的人机界面指南 （HIG） 规范，正字数为 17px。
iOS HIG 段落文本
谷歌的材料设计规范，正字数是16px。
材料设计主体1
机身颜色，纯白#000000不推荐。对比度太刺眼，建议使用最接近白色的灰度颜色。
例如，您可以参考蚂蚁金服的蚂蚁设计规范并使用#262626。
蚂蚁设计灰色
或者参考 Google 的材料设计规范并使用 #212121。
材质设计灰色
正文的植物间距建议为1.2倍~1.5倍。这允许每行之间有适当的空间，营造出出版风格的呼吸感。
3.标题的风格
标题穿插在正文中，作为大纲。因此，标题中最重要的是“醒目”或“吸引人”，以便读者在快速浏览时一目了然。
标题的字体大小可以与正文完全相同，只需调整单词粗细或颜色，就可以区分正文。没有必要刻意追求字体大小的“大”。
苹果的人机界面指南（HIG）规范，页面标题字体大小与正文相同，为17px。但是，这个词在“中”上很重，这是中等粗体。
iOS HIG 页面标题
谷歌的材料设计规范常用的标题是14px，甚至比正文的16px还要小。但是，这个词的重量也是“中”，即中粗体。
材料设计字幕2
值得注意的是，标题也是文章中为数不多的可以突出公众号品牌的地方之一。因此，您可以在标题中应用自己公众号的品牌颜色，使其在大面积的黑白中增添一抹色彩。
以标题编号为例，系统提供3种标题样式供选择。它们似乎有不同的形状和位置，但几何形状是“标题红色”的颜色。
再比如腾讯官网，标题后面的方块用的是“腾讯蓝”。
4. 排版规格示例
假设您的公众号徽标如下：
现在，我们根据以上内容快速为您的公众号制定一个排版规范：
正文：字体大小 18px，颜色 #262626，行距 1.5 倍。
标题：字体大小18px，中间歌曲，颜色#262626，行距1.5倍。在标题文本右侧的 12px 处，显示 1 个长度为 4px 的圆圈，颜色 #f85959。
构思规范后，您可以使用熟悉的绘图软件绘制它，如下所示：
恭喜您，您已经成功创建了带有自有品牌基因的公众号排版规范。
如何以书面形式应用规范？
规范的应用是减少排版的机械工作，集中精力进行文本写作。
在这里，我将向您介绍一个概念：Markdown 语言。
1. 降价
不要看到“语言”这个词，觉得这是一件非常困难的事情，其实简单来说就是：Markdown是一种写作语言，非常容易使用。
根据以上排版规范，大家只需要知道以下2种Markdown句型：
# 一级标题
**加粗**
用 Markdown 语言编写需要使用相应的软件。我建议您使用Typora，它是完全免费的，同时支持Windows和macOS平台。您可以访问其官方网站 typora.io 下载并安装。
解释一下：在文本后添加“#”符号表示这是一级标题;用“**”将文本括起来意味着将文本加粗。
用 Markdown 语言编写需要使用相应的软件。我建议您使用Typora，它是完全免费的，同时支持Windows和macOS平台。您可以访问其官方网站 typora.io 下载并安装。
现在，您可以体验在Typora中用Markdown语言专心写作的感觉。
添加“#”作为一级标题：
正常输入，即正文：
用
“**”将文本括起来，以粗体显示：
写完，选择全文，复制，然后粘贴到公众号后台：
可见，用Markdown的语言写的，所见即所得。复制粘贴到公众号背景后，保证文字的字体大小、颜色、行距与书写时完全相同。
但是，这种排版后的功效不是上面制定的排版规范。
没错，当前的排版效果只是 Typora 附带的一组默认主题。我们现在需要编写刚刚起草的排版规范作为 Typora 主题供我们使用。
在这里，我将向您介绍一个概念：CSS 语言。
2.CSS
这是另一种“语言”，没关系，我们只需要抓住一点皮肤。简而言之，CSS是一种用于描述网页外观的语言。
记住我们刚刚起草的排版规范：
正文：字体大小 18px，颜色 #262626，行距 1.5 倍。
标题：字体大小18px，中间歌曲，颜色#262626，行距1.5倍。左侧显示 1 个圆圈，长度为 4px，颜色 #f85959。
用CSS编写这组规范，就是这样：
p {
font-size: 18px;
color: #222222;
line-height: 1.5;
}
h1 {
font-size: 18px;
font-weight: bold;
color: #262626;
line-height: 1.5;
padding-left: 12px;
border-left: 4px #f85959 solid;
}
其中 p 表示主体，h1 表示第一级标题。知道了这一点，然后直接翻译成英文，就很容易理解了：
正文 {
字号: 18px;
颜色: #222222;
行距: 1.5;
}
一级标题 {
字号: 18px;
字重: 粗;
颜色: #262626;
行距: 1.5;
左边距: 12px;
左边框: 4px #f85959 实线;
}
3. 使用 CSS 作为 Typora 主题
现在，打开一个文本编辑器，将英文CSS代码粘贴进去，并将其存储为“官方.css号”。
然后，在Typora的首选项中，单击“打开主题文件夹”以复制其“官方帐户.css”文件。
复制成功后，退出 Typora 并重新打开 Typora。在“主题”菜单中，您可以看到我们的“公众号”主题，选择它：
成功
，排版规范应用成功。
现在进行技术摘要
其实你正在看的文章是用文中的方式完成的：用Markdown写->粘贴到公众号后台->配图片->推出去。
1. 前因
加油。
二、适合阅读排版
地址：
引自标题
将class=“typo”添加到需要排版的节点
3. 跨平台字体
地址：
jsdelivr 中的链接是无用的，您只能下载字体并将其.css加载到您自己的站点引用中。记得改自己的路
添加类=“font-kai
“，可选值为：字体黑、字体凯、字体歌曲、字体方松。方法同上。
4.鼠标效果
特效太多，找了半天，要么带电，要么侵入太强，要么用帆布css 排版，知道的不多，我努力了，没修好，选择换了。
不成功的地址：，效果五我太高兴了。
终于找到这个简单粗鲁、不懂事的开源。易于使用，记得为作者闪耀一颗星星。
地址：
我使用气泡功效css 排版，其他疗效对应于导出JS。
可以将以下代码添加到 js 中
// start bubbleCUrsor
function bubbleCursor(options) {
let hasWrapperEl = options && options.element
let element = hasWrapperEl || document.body
let width = window.innerWidth
let height = window.innerHeight
let cursor = { x: width / 2, y: width / 2 }
let particles = []
let canvas, context
let canvImages = []
function init(wrapperEl) {
canvas = document.createElement("canvas")
context = canvas.getContext("2d")
canvas.style.top = "0px"
canvas.style.left = "0px"
canvas.style.pointerEvents = "none"
if (hasWrapperEl) {
canvas.style.position = "absolute"
element.appendChild(canvas)
canvas.width = element.clientWidth
canvas.height = element.clientHeight
} else {
canvas.style.position = "fixed"
document.body.appendChild(canvas)
canvas.width = width
canvas.height = height
}
bindEvents()
loop()
}
// Bind events that are needed
function bindEvents() {
element.addEventListener("mousemove", onMouseMove)
element.addEventListener("touchmove", onTouchMove)
element.addEventListener("touchstart", onTouchMove)
window.addEventListener("resize", onWindowResize)
}
function onWindowResize(e) {
width = window.innerWidth
height = window.innerHeight
if (hasWrapperEl) {
canvas.width = element.clientWidth
canvas.height = element.clientHeight
} else {
canvas.width = width
canvas.height = height
}
}
function onTouchMove(e) {
if (e.touches.length > 0) {
for (let i = 0; i < e.touches.length; i++) {
addParticle(
e.touches[i].clientX,
e.touches[i].clientY,
canvImages[Math.floor(Math.random() * canvImages.length)]
)
}
}
}
function onMouseMove(e) {
if (hasWrapperEl) {
const boundingRect = element.getBoundingClientRect()
cursor.x = e.clientX - boundingRect.left
cursor.y = e.clientY - boundingRect.top
} else {
cursor.x = e.clientX
cursor.y = e.clientY
}
addParticle(cursor.x, cursor.y)
}
function addParticle(x, y, img) {
particles.push(new Particle(x, y, img))
}
function updateParticles() {
context.clearRect(0, 0, width, height)
// Update
for (let i = 0; i = 0; i--) {
if (particles[i].lifeSpan < 0) {
particles.splice(i, 1)
}
}
}
function loop() {
updateParticles()
requestAnimationFrame(loop)
}
function Particle(x, y, canvasItem) {
const lifeSpan = Math.floor(Math.random() * 60 + 60)
this.initialLifeSpan = lifeSpan //
this.lifeSpan = lifeSpan //ms
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 10),
y: -0.4 + Math.random() * -1,
}
this.position = { x: x, y: y }
this.canv = canvasItem
this.baseDimension = 4
this.update = function(context) {
this.position.x += this.velocity.x
this.position.y += this.velocity.y
this.velocity.x += ((Math.random() < 0.5 ? -1 : 1) * 2) / 75
this.velocity.y -= Math.random() / 600
this.lifeSpan--
const scale =
0.2 + (this.initialLifeSpan - this.lifeSpan) / this.initialLifeSpan
context.fillStyle = "#e6f1f7"
context.strokeStyle = "#3a92c5"
context.beginPath()
context.arc(
this.position.x - (this.baseDimension / 2) * scale,
this.position.y - this.baseDimension / 2,
this.baseDimension * scale,
0,
2 * Math.PI
)
context.stroke()
context.fill()
context.closePath()
}
}
init()
}
new bubbleCursor()
// end bubbleCUrsor
影响：
五、小结
够了，今天很美。
