知识库首页 知识库-AI wechat-styling-sop.md

wechat styling sop

本地来源：Knowledge/AI/创始人一百篇/wechat-styling-sop.md

微信公众号排版 SOP 规范文档

版本: v1.0
适用范围: 微信公众号图文排版
核心原则: 全内联样式，确保跨平台兼容

一、微信公众号 CSS 限制（必读）

❌ 禁止使用（会被微信过滤）

禁用项 说明
<style> 标签 所有样式必须写成内联 style 属性
position 属性 absolute/relative/fixed 全部失效
linear-gradient 复杂渐变会被过滤，只用纯色
ID 选择器 会被删除
class 选择器 外部样式表无效
JavaScript 完全不支持
transform 部分场景失效
百分比单位 如 translateY(-100%) 会失效

✅ 可安全使用

  • 内联 style="" 属性
  • background-color（纯色）
  • border、border-left、border-radius
  • padding、margin
  • font-size、font-weight、color
  • text-align
  • display: inline-block
  • line-height
  • letter-spacing

二、标准配色方案

2.1 主色系

用途 色值 示例
微信绿（主色） #07c160 章节标题、成功提示、编号徽章
强调红 #fa5151 重点标注、警告、数据亮点
链接蓝 #1890ff 链接、信息提示、二级标题
高级紫 #722ed1 专业术语、阶段标签、特殊强调
成功绿 #52c41a 正确做法、成功结果
警告橙 #fa8c16 注意事项、动机标注

2.2 文字色系

用途 色值
主标题 #1a1a1a
正文 #3f3f3f
二级文字 #555555
辅助说明 #888888
浅色提示 #aaaaaa
分隔符 #cccccc

2.3 背景色系

用途 色值
浅灰卡片 #fafafa
绿色成功 #f6ffed
橙色金句 #fff7e6
蓝色信息 #f0f5ff
黄色警告 #fffbe6
红色错误 #fff2e8
代码块深色 #1e1e3f

2.4 边框色系

用途 色值
通用边框 #e8e8e8
绿色边框 #b7eb8f
橙色边框 #ffc069 / #ffd591
蓝色边框 #adc6ff
红色边框 #ffbb96

2.5 下划线标注色（用于文字高亮）

颜色 border-bottom 色值
红色下划线 #ffccc7
绿色下划线 #b7eb8f
蓝色下划线 #91d5ff
紫色下划线 #d3adf7
橙色下划线 #ffd591

三、组件样式模板

3.1 主标题

<p style="font-size: 22px; font-weight: bold; color: #1a1a1a; margin: 0; letter-spacing: 1px; text-align: center;">🚀 文章主标题</p>

3.2 副标题/说明

<p style="font-size: 14px; color: #888888; margin-top: 12px; text-align: center;">副标题说明文字</p>

3.3 章节标题（带编号徽章）

<p style="font-size: 18px; font-weight: bold; color: #1a1a1a; padding-left: 12px; border-left: 4px solid #07c160; margin-bottom: 24px;">
    <span style="display: inline-block; background-color: #07c160; color: white; width: 24px; height: 24px; text-align: center; line-height: 24px; border-radius: 4px; font-size: 14px; margin-right: 8px;">一</span>
    章节标题文字
</p>

3.4 二级标题

<p style="font-size: 16px; font-weight: bold; color: #1a1a1a; margin: 28px 0 16px; padding-bottom: 8px; border-bottom: 1px solid #eeeeee;">👤 二级标题</p>

3.5 三级小标题

<p style="font-size: 15px; font-weight: bold; color: #722ed1; margin: 24px 0 12px;">😰 三级小标题</p>

3.6 引言/提示块（绿色左边框）

<section style="background-color: #f7f7f7; border-left: 4px solid #07c160; padding: 16px 20px; margin: 24px 0; border-radius: 0 8px 8px 0;">
    <p style="margin: 0; font-size: 15px; color: #555555;">引言内容文字</p>
</section>

3.7 英文金句卡片

<section style="background-color: #fff7e6; border-radius: 8px; padding: 16px 20px; margin: 20px 0;">
    <p style="font-family: 'Courier New', monospace; font-size: 15px; color: #d46b08; margin: 0 0 10px 0; font-weight: 500;">"English quote here."</p>
    <p style="font-size: 14px; color: #ad6800; margin: 0; padding-left: 12px; border-left: 3px solid #ffc069;">「中文翻译在这里。」</p>
</section>

3.8 成功/正确提示框

<section style="background-color: #f6ffed; border: 1px solid #b7eb8f; border-radius: 8px; padding: 14px 18px; margin: 16px 0;">
    <p style="margin: 0; font-size: 15px;"><strong style="color: #52c41a;">✅ 结果：</strong>成功提示内容</p>
</section>

3.9 警告/注意提示框

<section style="background-color: #fffbe6; border-left: 4px solid #faad14; padding: 16px 20px; margin: 20px 0; border-radius: 0 8px 8px 0;">
    <p style="margin: 0; font-size: 15px;"><strong style="color: #d48806;">⚠️ 重要提醒：</strong>警告内容</p>
</section>

3.10 错误/踩坑提示框

<section style="background-color: #fff2e8; border: 1px solid #ffbb96; border-radius: 8px; padding: 16px 20px; margin: 16px 0;">
    <p style="font-size: 14px; font-weight: bold; color: #fa541c; margin: 0 0 12px 0;">❌ 踩坑标题</p>
    <p style="margin: 0; font-size: 15px;">踩坑内容描述</p>
</section>

3.11 信息卡片（通用灰底）

<section style="background-color: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; padding: 16px 20px; margin: 16px 0;">
    <p style="font-size: 14px; font-weight: bold; color: #1890ff; margin: 0 0 12px 0;">📋 卡片标题</p>
    <p style="margin: 6px 0; font-size: 15px;">卡片内容</p>
</section>

3.12 阶段标签

<p style="display: inline-block; background-color: #722ed1; color: white; padding: 4px 14px; border-radius: 16px; font-size: 13px; font-weight: bold; margin: 16px 0 12px;">阶段 A：标签名称</p>

3.13 圆形编号列表项

<p style="margin: 8px 0 8px 20px; font-size: 15px;">
    <span style="display: inline-block; background-color: #07c160; color: white; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius: 50%; font-size: 12px; margin-right: 6px;">1</span>
    列表内容文字
</p>

3.14 时间线样式

<section style="margin: 20px 0; padding-left: 20px; border-left: 3px solid #07c160;">
    <p style="margin: 16px 0;">
        <span style="color: #07c160; font-weight: bold;">第 1 个月</span><br>
        <span style="font-size: 15px;">时间线内容描述</span>
    </p>
</section>

3.15 数据行（带左边框）

<p style="margin: 8px 0; padding: 8px 12px; background-color: white; border-radius: 4px; font-size: 14px; border-left: 3px solid #07c160;">
    <strong>时间点</strong> · 数据描述内容
</p>

3.16 代码块

<p style="background-color: #1e1e3f; color: #a5b4fc; padding: 12px 16px; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 14px; margin: 16px 0;">
    代码内容
</p>

3.17 行内代码

<code style="background-color: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 13px;">代码片段</code>

3.18 定价/套餐卡片

<p style="margin: 10px 0; padding: 10px 14px; background-color: #fff7e6; border-radius: 6px; font-size: 14px;">
    <span style="display: inline-block; background-color: #fa8c16; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px; margin-right: 8px;">Pro</span>
    <strong>$29/月</strong> · 功能描述
</p>

3.19 分隔符

<p style="text-align: center; color: #cccccc; font-size: 16px; letter-spacing: 8px; margin: 32px 0;">✦ ✦ ✦</p>

3.20 文字高亮标注

<!-- 红色下划线 -->
<span style="color: #fa5151; font-weight: bold; border-bottom: 2px solid #ffccc7;">重点文字</span>

<!-- 绿色下划线 -->
<span style="color: #52c41a; font-weight: bold; border-bottom: 2px solid #b7eb8f;">成功文字</span>

<!-- 蓝色下划线 -->
<span style="color: #1890ff; font-weight: bold; border-bottom: 2px solid #91d5ff;">信息文字</span>

<!-- 紫色下划线 -->
<span style="color: #722ed1; font-weight: bold; border-bottom: 2px solid #d3adf7;">专业术语</span>

3.21 星号列表项

<p style="margin: 8px 0 8px 20px; font-size: 15px;">✦ 列表内容</p>

3.22 结尾互动框

<section style="background-color: #f0f5ff; border: 2px solid #adc6ff; border-radius: 12px; padding: 20px 24px; margin: 24px 0; text-align: center;">
    <p style="font-size: 17px; font-weight: bold; color: #2f54eb; margin: 0 0 12px 0;">🎯 互动标题</p>
    <p style="margin: 0; font-size: 15px; color: #555555;">互动引导文字</p>
</section>

3.23 参考来源（小字）

<section style="margin-top: 36px; padding-top: 20px; border-top: 1px solid #e8e8e8;">
    <p style="font-size: 13px; color: #888888; margin: 0 0 12px 0;"><strong>📚 参考来源：</strong></p>
    <p style="font-size: 12px; color: #aaaaaa; margin: 4px 0;">1. 来源名称</p>
</section>

3.24 参考链接列表（最小字）

<section style="margin-top: 24px; padding: 16px; background-color: #fafafa; border-radius: 8px;">
    <p style="font-size: 12px; color: #888888; margin: 0 0 10px 0;"><strong>参考原文信息列表：</strong></p>
    <p style="font-size: 11px; color: #aaaaaa; margin: 3px 0; word-break: break-all;">1. https://example.com/article</p>
</section>

3.25 文章结尾

<p style="text-align: center; color: #cccccc; font-size: 20px; margin: 36px 0 20px;">✨</p>
<p style="text-align: center; color: #aaaaaa; font-size: 13px; margin: 0;">— END —</p>

四、字号规范

用途 字号
主标题 22px
章节标题 18px
二级标题 16px
三级标题 15px + bold
正文 15-16px
卡片标题 14px + bold
辅助说明 14px
副标题/提示 13-14px
参考来源 12-13px
参考链接 11px

五、间距规范

用途 数值
章节间距 margin: 36px 0
段落间距 margin: 16px 0
卡片内边距 padding: 16px 20px
分隔符间距 margin: 32px 0
列表项间距 margin: 8px 0
时间线项间距 margin: 16px 0

六、圆角规范

用途 数值
大卡片 8px
小标签 16px (胶囊形)
代码块 6px
行内代码 3px
编号徽章方形 4px
编号徽章圆形 50%
结尾互动框 12px

七、开发流程 Checklist

7.1 开发前检查

  • [ ] 确认所有样式写在 style 属性内
  • [ ] 不使用 &lt;style&gt; 标签
  • [ ] 不使用 class 和 id
  • [ ] 不使用 position 定位
  • [ ] 不使用渐变背景

7.2 开发中检查

  • [ ] 使用标准配色方案
  • [ ] 使用标准字号规范
  • [ ] 使用标准组件模板
  • [ ] 图片使用 <img> 标签 + 内联样式

7.3 发布前检查

  • [ ] 在浏览器中预览效果
  • [ ] 复制粘贴到公众号后台
  • [ ] 在手机端预览检查
  • [ ] 检查深色模式显示（可选）

八、常见问题 FAQ

Q1: 为什么样式不显示？

A: 检查是否使用了 &lt;style&gt; 标签或 class，必须全部改为内联样式。

Q2: 为什么背景渐变不生效？

A: 微信会过滤 linear-gradient，请使用纯色 background-color。

Q3: 为什么布局错乱？

A: 检查是否使用了 position 属性，微信会删除所有定位属性。

Q4: 为什么圆形编号显示为方形？

A: 确保同时设置了 width、height、line-height 相同数值，并使用 display: inline-block。

Q5: 深色模式下显示异常？

A: iOS 深色模式会给元素添加 transform 属性，可能导致层级问题。建议避免复杂的层叠结构。

九、快速复制模板

完整的文章框架模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    <title>文章标题</title>
</head>
<body style="font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 1.8; color: #3f3f3f; padding: 20px; max-width: 680px; margin: 0 auto; font-size: 16px;">

<!-- 标题区 -->
<section style="text-align: center; margin-bottom: 30px;">
    <p style="font-size: 22px; font-weight: bold; color: #1a1a1a; margin: 0;">文章标题</p>
    <p style="font-size: 14px; color: #888888; margin-top: 12px;">副标题</p>
</section>

<!-- 引言 -->
<section style="background-color: #f7f7f7; border-left: 4px solid #07c160; padding: 16px 20px; margin: 24px 0; border-radius: 0 8px 8px 0;">
    <p style="margin: 0; font-size: 15px; color: #555555;">引言内容</p>
</section>

<!-- 分隔符 -->
<p style="text-align: center; color: #cccccc; font-size: 16px; letter-spacing: 8px; margin: 32px 0;">✦ ✦ ✦</p>

<!-- 章节 -->
<section style="margin: 36px 0;">
    <p style="font-size: 18px; font-weight: bold; color: #1a1a1a; padding-left: 12px; border-left: 4px solid #07c160; margin-bottom: 24px;">
        <span style="display: inline-block; background-color: #07c160; color: white; width: 24px; height: 24px; text-align: center; line-height: 24px; border-radius: 4px; font-size: 14px; margin-right: 8px;">一</span>
        章节标题
    </p>

    <!-- 正文内容 -->
    <p style="margin: 16px 0;">正文段落内容</p>
</section>

<!-- 结尾 -->
<p style="text-align: center; color: #cccccc; font-size: 20px; margin: 36px 0 20px;">✨</p>
<p style="text-align: center; color: #aaaaaa; font-size: 13px; margin: 0;">— END —</p>

</body>
</html>

文档维护人: [填写]
最后更新: 2025年12月17日

本文档为站内渲染。原始文件本地路径：saas/source/knowledge-ai/Knowledge-AI-创始人一百篇-wechat-styling-sop-58605e.md（仅本地保留，不入库不部署）