🎨 Chinese Font Generator – 中文字体生成器
🔄 Translation / 翻译
🎭 Quick Effect Presets / 快速效果预设
🎛️ Basic Controls / 基础控制
32px
2px
1.4
✨ Visual Effects / 视觉效果
1x
🔄 3D Transform / 3D变换
0°
0°
0°
1x
600px
📤 Export Options / 导出选项
${document.getElementById('chineseTextInput').value}
`;
this.downloadText(htmlContent, 'chinese-font-design.html', 'text/html');
this.showNotification('🔗 HTML exported! / HTML已导出!');
}
exportAsCSS() {
const css = this.generateInlineCSS();
this.downloadText(css, 'chinese-font-styles.css', 'text/css');
this.showNotification('🎨 CSS exported! / CSS已导出!');
}
exportAsSVG() {
const text = document.getElementById('chineseTextInput').value;
const svgContent = `
`;
this.downloadText(svgContent, 'chinese-font-design.svg', 'image/svg+xml');
this.showNotification('📐 SVG exported! / SVG已导出!');
}
generateInlineCSS() {
return `
font-size: ${this.currentSettings.fontSize}px;
font-weight: ${this.currentSettings.fontWeight};
color: ${this.currentSettings.textColor};
letter-spacing: ${this.currentSettings.letterSpacing}px;
line-height: ${this.currentSettings.lineHeight};
text-transform: ${this.currentSettings.textTransform};
text-align: ${this.currentSettings.textAlign};
font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
`;
}
downloadText(content, filename, mimeType) {
const blob = new Blob([content], { type: mimeType });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
URL.revokeObjectURL(link.href);
}
initializeControls() {
// Initialize legacy controls first
this.setupControls();
// Setup keyboard events and auto-generation
const chineseTextInput = document.getElementById('chineseTextInput');
if (chineseTextInput) {
chineseTextInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
this.generateChineseFonts();
}
});
// Auto-generate on input change with debouncing
chineseTextInput.addEventListener('input', () => {
clearTimeout(window.fontGenTimeout);
const text = chineseTextInput.value.trim();
if (text.length > 0) {
window.fontGenTimeout = setTimeout(() => {
this.generateChineseFonts();
}, 300);
}
});
}
// English input for translation
const englishTextInput = document.getElementById('englishTextInput');
if (englishTextInput) {
englishTextInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
translateToChinese();
}
});
englishTextInput.addEventListener('input', () => {
clearTimeout(window.translateTimeout);
const text = englishTextInput.value.trim();
if (text.length > 2) {
window.translateTimeout = setTimeout(() => {
translateToChinese();
}, 1000);
} else if (text.length === 0) {
const translationResult = document.getElementById('translationResult');
if (translationResult) {
translationResult.innerHTML = '';
}
const chineseInput = document.getElementById('chineseTextInput');
if (chineseInput && text.length === 0) {
chineseInput.value = '你好世界';
this.generateChineseFonts();
}
}
});
}
}
}
// Global generator instance
let fontGenerator;
// Legacy compatibility functions
function applyCustomStyles(baseStyle) {
return fontGenerator ? fontGenerator.applyCustomStyles(baseStyle) : baseStyle;
}
function generateChineseFonts() {
if (fontGenerator) {
fontGenerator.generateChineseFonts();
}
}
// Enhanced Translation function with API integration
async function translateToChinese() {
const englishInput = document.getElementById('englishTextInput');
const chineseInput = document.getElementById('chineseTextInput');
const translationResult = document.getElementById('translationResult');
if (!englishInput || !translationResult || !chineseInput) {
console.error('Translation elements not found');
alert('Translation elements not found. Please refresh the page.');
return;
}
const englishText = englishInput.value.trim();
if (!englishText) {
translationResult.innerHTML = 'Please enter some English text to translate. / 请输入一些英文文本进行翻译。
'; englishInput.focus(); return; } // Show loading state translationResult.innerHTML = `
🔄 Translating / 翻译中... Please wait / 请稍等...
`;
try {
let chineseText = await translateText(englishText, 'en', 'zh');
if (chineseText && chineseText !== englishText) {
chineseInput.value = chineseText;
translationResult.innerHTML = `
✅ Translation / 翻译 (API): ${chineseText}
`;
// Auto-generate fonts with the translated text
setTimeout(() => {
generateChineseFonts();
}, 500);
} else {
// Fallback to dictionary translation
fallbackDictionaryTranslation(englishText, chineseInput, translationResult);
}
} catch (error) {
console.error('Translation error:', error);
// Fallback to dictionary translation
fallbackDictionaryTranslation(englishText, chineseInput, translationResult);
}
}
// API Translation function with multiple providers
async function translateText(text, from, to) {
// First try MyMemory API
try {
const myMemoryUrl = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=${from}|${to}`;
const myMemoryResponse = await fetch(myMemoryUrl);
const myMemoryData = await myMemoryResponse.json();
if (myMemoryData.responseData && myMemoryData.responseData.translatedText) {
return myMemoryData.responseData.translatedText;
}
} catch (error) {
console.warn('MyMemory API failed:', error);
}
// Second try Lingva Translate API
try {
const lingvaUrl = `https://lingva.ml/api/v1/${from}/${to}/${encodeURIComponent(text)}`;
const lingvaResponse = await fetch(lingvaUrl);
const lingvaData = await lingvaResponse.json();
if (lingvaData.translation) {
return lingvaData.translation;
}
} catch (error) {
console.warn('Lingva API failed:', error);
}
// Third try alternative Lingva instance
try {
const lingvaAltUrl = `https://translate.jae.fi/api/v1/${from}/${to}/${encodeURIComponent(text)}`;
const lingvaAltResponse = await fetch(lingvaAltUrl);
const lingvaAltData = await lingvaAltResponse.json();
if (lingvaAltData.translation) {
return lingvaAltData.translation;
}
} catch (error) {
console.warn('Alternative Lingva API failed:', error);
}
// Fourth try another Lingva instance
try {
const lingvaAlt2Url = `https://lingva.garudalinux.org/api/v1/${from}/${to}/${encodeURIComponent(text)}`;
const lingvaAlt2Response = await fetch(lingvaAlt2Url);
const lingvaAlt2Data = await lingvaAlt2Response.json();
if (lingvaAlt2Data.translation) {
return lingvaAlt2Data.translation;
}
} catch (error) {
console.warn('Second alternative Lingva API failed:', error);
}
return null; // All APIs failed
}
// Fallback dictionary translation
function fallbackDictionaryTranslation(englishText, chineseInput, translationResult) {
const words = englishText.toLowerCase().split(' ');
let chineseText = '';
words.forEach((word, index) => {
const cleanWord = word.replace(/[^\w]/g, '');
const punctuation = word.replace(/\w/g, '');
const translation = englishToChineseMap[cleanWord] || cleanWord;
chineseText += translation + punctuation;
if (index < words.length - 1) chineseText += ' ';
});
chineseInput.value = chineseText;
translationResult.innerHTML = `
⚠️ Translation / 翻译 (Dictionary): ${chineseText}
API translation unavailable, using local dictionary. / API翻译不可用,使用本地词典。
`;
// Auto-generate fonts with the translated text
setTimeout(() => {
generateChineseFonts();
}, 500);
}
// Generate Chinese fonts function
function generateChineseFonts() {
const textInput = document.getElementById('chineseTextInput');
const resultsSection = document.getElementById('chineseResultsSection');
const fontResults = document.getElementById('chineseFontResults');
if (!textInput || !resultsSection || !fontResults) {
console.error('Required elements not found');
alert('Error: Required elements not found. Please refresh the page.');
return;
}
const inputText = textInput.value.trim();
if (!inputText) {
alert('请输入中文文本以生成字体!/ Please enter Chinese text to generate fonts!');
textInput.focus();
return;
}
console.log('Generating fonts for text:', inputText);
let resultsHTML = '';
Object.entries(chineseFontStyles).forEach(([fontName, styleObj]) => {
const safeText = inputText.replace(/'/g, "'").replace(/"/g, """);
const customStyle = applyCustomStyles(styleObj.style);
const safeCSSStyle = customStyle.replace(/'/g, "\\'").replace(/"/g, '\\"');
resultsHTML += `
API translation unavailable, using local dictionary. / API翻译不可用,使用本地词典。
🎨
${fontName}
${inputText}