fix(canvas): 改进字体加载和文本渲染逻辑

js/script.js

@@ -2190,7 +2190,23 @@
 
         await drawOverlayImagesHD(ctx, scale);
 
+        // 等待所有字体加载完成
+        const fontPromises = [];
         const textInputs = container.querySelectorAll('.preview-input-layer .text-input');
+        textInputs.forEach(textInput => {
+            const style = window.getComputedStyle(textInput);
+            const fontFamily = style.fontFamily.split(',')[0].replace(/['"]/g, '').trim();
+            if (fontFamily && document.fonts) {
+                fontPromises.push(document.fonts.load('16px ' + fontFamily).catch(() => {}));
+            }
+        });
+        
+        // 最多等待 500ms
+        await Promise.race([
+            Promise.all(fontPromises),
+            new Promise(resolve => setTimeout(resolve, 500))
+        ]);
+        
         textInputs.forEach(textInput => {
             drawTextOnCanvasHD(ctx, textInput, scale);
         });
@@ -2425,6 +2441,9 @@
         const inputLeft = inputElement.offsetLeft * scale;
         const inputTop = inputElement.offsetTop * scale;
 
+        // 强制刷新样式，确保获取最新计算值
+        inputElement.getBoundingClientRect();
+        
         const style = window.getComputedStyle(inputElement);
         const originalFontSize = parseInt(style.fontSize);
         const fontSize = originalFontSize * scale; // 字体大小也按比例缩放
@@ -2439,15 +2458,46 @@
             lineHeight = lineHeight * scale;
         }
         
-        // 微信中：使用更粗的字体权重以获得更好的可读性
+        // 处理字体粗细 - 统一转换为标准格式
         let fontWeight = style.fontWeight;
-        if (isWechat() && (fontWeight === '400' || fontWeight === 'normal')) {
-            fontWeight = '500'; // 稍微加粗一点
+        // 数值转换为关键字
+        if (fontWeight === '400' || fontWeight === 'normal') fontWeight = 'normal';
+        else if (fontWeight === '700' || fontWeight === 'bold') fontWeight = 'bold';
+        // 微信中：使用更粗的字体权重以获得更好的可读性
+        if (isWechat() && fontWeight === 'normal') {
+            fontWeight = '500';
         }
         
-        // 使用高清字体渲染
-        ctx.font = `${fontWeight} ${fontSize}px ${style.fontFamily}`;
+        // 获取斜体样式
+        let fontStyle = style.fontStyle;
+        if (fontStyle === 'oblique') fontStyle = 'italic';
+        else if (fontStyle !== 'italic') fontStyle = 'normal';
+        
+        // 清理字体名称中的引号
+        let fontFamily = style.fontFamily.replace(/['"]/g, '');
+        // 确保字体堆栈有效
+        if (!fontFamily.includes('sans-serif') && !fontFamily.includes('serif') && !fontFamily.includes('monospace')) {
+            fontFamily += ', sans-serif';
+        }
+        
+        // 使用高清字体渲染 - 按标准顺序：style weight size family
+        const fontString = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+        ctx.font = fontString;
         ctx.fillStyle = style.color;
+        
+        // 调试：输出实际应用的字体样式
+        console.log('文本绘制样式:', {
+            text: text.substring(0, 10) + (text.length > 10 ? '...' : ''),
+            fontString: fontString,
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontStyle: fontStyle,
+            fontFamily: fontFamily,
+            originalFontFamily: style.fontFamily,
+            color: style.color,
+            actualFont: ctx.font,
+            isWechat: isWechat()
+        });
         ctx.textBaseline = 'alphabetic';
         
         // 微信中：开启文字抗锯齿