feat(doc-data): Add md-font component and update md-bg

content/style-test.md

@@ -1,4 +1,4 @@
-:md-font[Pacifico]{source=google} hello?
+:md-font[Pacifico]{source=google color=crimson} hello?
 :md-dice[d6]{.bg-amber-100}
 
 :md-border[crimson]{.b}

docs/markdown.md

@@ -201,6 +201,45 @@
 # 红色背景
 ```
 
+### 🔤 字体组件 (md-font)
+
+```markdown
+:md-font[Noto Sans SC]{source="google" weight="700" color="#ff00dd"}
+:md-font[LXGW WenKai]{source="emfont"}
+:md-font[Arial]{source="local"}
+```
+
+**功能：**
+- 设置当前文章卡片的字体
+- 支持从 Google Fonts、emfont 或本地加载字体
+- 支持设置字体颜色
+
+**属性：**
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `source` | `google` \| `emfont` \| `local` | `local` | 字体来源 |
+| `weight` | string | `400` | 字体粗细 |
+| `color` | string | - | 字体颜色（CSS 颜色值，如 `#ff00dd`、`rgb(255,0,0)`） |
+
+**示例：**
+
+```markdown
+:md-font[Noto Sans SC]{source="google" weight="400"}
+
+# 标题文本
+
+这里是正文内容，使用 Noto Sans SC 字体。
+
+:md-font[Noto Sans SC]{source="google" weight="400" color="#1a1a2e"}
+
+# 深色文字
+
+:md-font[Noto Sans SC]{source="google" weight="700" color="crimson"}
+
+# 红色粗体标题
+```
+
 ### 📍 标记组件 (md-pins)
 
 ```markdown

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: "将图片设置为当前文章卡片的背景，支持多种适配方式。",
+    description: "设置背景图片或纯色作为文章卡片背景，支持多种适配方式。",
-    syntax: ':md-bg[./images/dungeon-bg.jpg]{fit="cover"}',
+    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",