diff --git a/js/script.js b/js/script.js index 8ca1bcd..29e078f 100644 --- a/js/script.js +++ b/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'; // 微信中:开启文字抗锯齿