diff --git a/src/components/doc-data.ts b/src/components/doc-data.ts
index 876b816..5cad2b4 100644
--- a/src/components/doc-data.ts
+++ b/src/components/doc-data.ts
@@ -116,25 +116,72 @@ CSV 要求包含 label, body 列，可选 group 列分组。支持 YAML front ma
 非 fixed 模式下点击图片添加标记，点击标记删除。`,
     usage: "用于战斗地图标注、地牢房间标记、任务地点指示等。",
   },
+  {
+    tag: "md-font",
+    icon: "🔤",
+    title: "字体组件",
+    description:
+      "设置整个文档的字体和文字颜色，支持 Google Fonts、emfont 和系统本地字体三种来源。",
+    syntax:
+      ':md-font[Noto Sans SC]{source="google" weight="400" color="#ff00dd"}',
+    props: [
+      {
+        name: "source",
+        type: "google | emfont | local",
+        default: "local",
+        desc: "字体来源",
+      },
+      { name: "weight", type: "string", default: '"400"', desc: "字体粗细" },
+      {
+        name: "color",
+        type: "string",
+        desc: "文字颜色（CSS 颜色值，如 #ff00dd、rgb(255,0,0)）",
+      },
+    ],
+    examples: `**Google 字体：**
+:md-font[Noto Sans SC]{source="google"}
+
+**Emfont 字体：**
+:md-font[Source Han Serif]{source="emfont" weight="700"}
+
+**本地字体（默认）：**
+:md-font[STSong]
+
+**设置文字颜色：**
+:md-font[Noto Sans SC]{source="google" color="#1a1a2e"}
+
+:md-font[Noto Sans SC]{source="google" weight="700" color="crimson"}
+
+字体和颜色将应用到整个文档卡片。`,
+    usage: "用于切换文档的显示字体和文字颜色，适配不同风格需求。",
+  },
   {
     tag: "md-bg",
     icon: "🖼️",
     title: "背景组件",
-    description: "将图片设置为当前文章卡片的背景，支持多种适配方式。",
-    syntax: ':md-bg[./images/dungeon-bg.jpg]{fit="cover"}',
+    description: "设置背景图片或纯色作为文章卡片背景，支持多种适配方式。",
+    syntax: ":md-bg[#ff00dd]",
     props: [
       {
         name: "fit",
         type: "cover | contain | fill | none | scale-down",
         default: "cover",
-        desc: "背景适配方式",
+        desc: "背景适配方式（仅图片时生效）",
       },
     ],
     examples: `**设置背景图：**
 :md-bg[./images/dungeon-bg.jpg]{fit="cover"}
 
-背景图自动覆盖整个卡片区域，配合文章内容营造沉浸氛围。`,
-    usage: "用于营造场景氛围，如地牢、森林、城镇等不同环境的背景。",
+**设置纯色背景：**
+:md-bg[#2a1a3a]
+
+:md-bg[rgb(200,50,50)]
+
+:md-bg[#ff00dd]
+
+支持图片路径或任意 CSS 颜色值（hex、rgb、颜色名等）。`,
+    usage:
+      "用于营造场景氛围，如地牢、森林、城镇等不同环境的背景，或纯色区分不同主题。",
   },
   {
     tag: "md-font",