fix: card content font

pages/make/index.vue

@@ -17,9 +17,14 @@
           @tap="activeTool = 'text'"
           :style="{ marginTop: 80 + bubbleOffsetY + 'rpx' }"
         >
-          <text class="bubble-text" :style="{ color: selectedColor }">{{
-            targetName + "\n  " + blessingText
-          }}</text>
+          <text
+            class="bubble-text"
+            :style="{
+              color: selectedColor,
+              fontFamily: selectedFont.family,
+            }"
+            >{{ targetName + "\n  " + blessingText }}</text
+          >
         </view>
         <view class="user" :style="{ left: 160 + userOffsetX + 'rpx' }">
           <image class="avatar" :src="userAvatar" mode="aspectFill" />
@@ -150,6 +155,26 @@
           </view>
         </view>
 
+        <!-- 字体选择 -->
+        <view class="form-item">
+          <text class="label">字体样式</text>
+          <scroll-view scroll-x class="font-scroll" show-scrollbar="false">
+            <view class="font-list">
+              <view
+                v-for="(font, index) in fontList"
+                :key="index"
+                class="font-item"
+                :class="{ active: selectedFont.family === font.family }"
+                @tap="changeFont(font)"
+              >
+                <text :style="{ fontFamily: font.family }">{{
+                  font.name
+                }}</text>
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+
         <!-- 文字颜色 -->
         <view class="form-item">
           <text class="label">文字颜色</text>
@@ -240,6 +265,49 @@ const blessingText = ref("");
 const textColors = ["#ffffff", "#ff3b30", "#F5A623", "#8B572A", "#000000"];
 const selectedColor = ref("#ffffff");
 
+const fontList = [
+  { name: "默认", family: "PingFang SC", url: "" },
+  {
+    name: "毛笔",
+    family: "MaoBi",
+    url: "https://file.lihailezzc.com/MaShanZheng-Regular.ttf", // 示例地址
+  },
+  {
+    name: "手写",
+    family: "ShouXie",
+    url: "https://file.lihailezzc.com/resource/font/shouxie.ttf", // 示例地址
+  },
+  {
+    name: "可爱",
+    family: "KeAi",
+    url: "https://file.lihailezzc.com/resource/font/keai.ttf", // 示例地址
+  },
+];
+const selectedFont = ref(fontList[0]);
+
+const changeFont = (font) => {
+  if (font.url) {
+    uni.showLoading({ title: "加载字体中" });
+    uni.loadFontFace({
+      family: font.family,
+      source: `url("${font.url}")`,
+      success: () => {
+        selectedFont.value = font;
+        uni.hideLoading();
+      },
+      fail: (err) => {
+        console.error(err);
+        uni.hideLoading();
+        // 如果加载失败，可以尝试直接设置（有些情况可能已经缓存或本地支持）
+        // 或者提示用户
+        uni.showToast({ title: "字体加载失败", icon: "none" });
+      },
+    });
+  } else {
+    selectedFont.value = font;
+  }
+};
+
 const greetingLib = ref([]);
 const greetingIndex = ref(0);
 
@@ -468,6 +536,7 @@ const saveByCanvas = async (save = true) => {
     lineHeight: 46,
     backgroundColor: "rgba(255,255,255,0.85)",
     textColor: selectedColor.value,
+    fontFamily: selectedFont.value.family,
   });
 
   drawUserBubble(ctx, {
@@ -955,8 +1024,8 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
   box-sizing: border-box;
 }
 .greeting-card.active {
+  background: #fff5f5;
   border-color: #ff3b30;
-  background: #fff6f5;
 }
 .greeting-text {
   font-size: 24rpx;
@@ -994,9 +1063,34 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
   transform: translateY(-50%);
   color: #999;
 }
+.font-scroll {
+  white-space: nowrap;
+  width: 100%;
+}
+
+.font-list {
+  display: flex;
+  padding: 4rpx;
+}
+
+.font-item {
+  padding: 12rpx 24rpx;
+  background: #f5f5f5;
+  border-radius: 8rpx;
+  margin-right: 16rpx;
+  border: 2rpx solid transparent;
+  transition: all 0.3s;
+}
+
+.font-item.active {
+  background: #fff5f5;
+  border-color: #ff3b30;
+  color: #ff3b30;
+}
+
 .color-list {
   display: flex;
-  gap: 24rpx;
+  gap: 20rpx;
 }
 .color-item {
   width: 64rpx;