WeWork/invitation-maker
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化字体栈设置与选择器匹配逻辑

Browse Source
This commit is contained in:
ZF Sun
2026-04-21 10:23:18 +08:00
parent e35059b200
commit bb2ae9c139
3 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/style.css
View File

@@ -390,7 +390,7 @@ html, body {
padding: 0; padding: 0;
font-size: 16px; font-size: 16px;
color: #000; color: #000;
font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
background: transparent; background: transparent;
outline: 2px solid transparent; outline: 2px solid transparent;
border-radius: 4px; border-radius: 4px;

9
index.html
View File

@@ -31,10 +31,11 @@
<label class="toolbar-label"> <label class="toolbar-label">
<span>字体</span> <span>字体</span>
<select id="fontPicker"> <select id="fontPicker">
<option value="Microsoft YaHei">雅黑</option> <option value="-apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC, sans-serif">系统默认</option>
<option value="SimHei">黑体</option> <option value="PingFang SC, Microsoft YaHei, Noto Sans CJK SC, sans-serif">苹方/雅黑</option>
<option value="SimSun">宋体</option> <option value="Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC, sans-serif">冬青黑体</option>
<option value="Arial">Arial</option> <option value="SimHei, Microsoft YaHei, Noto Sans CJK SC, sans-serif">黑体</option>
<option value="SimSun, Songti SC, serif">宋体</option>
</select> </select>
</label> </label>
<div class="toolbar-divider"></div> <div class="toolbar-divider"></div>

15
js/script.js
View File

@@ -1199,13 +1199,22 @@
// 更新颜色选择器 // 更新颜色选择器
colorPicker.value = rgbToHex(color); colorPicker.value = rgbToHex(color);
// 更新字体选择器 // 更新字体选择器 - 匹配字体栈中的主要字体
let matched = false;
for (let option of fontPicker.options) { for (let option of fontPicker.options) {
if (option.value === fontFamily || fontFamily.includes(option.value)) { const optionFonts = option.value.toLowerCase().split(',').map(f => f.trim());
const currentFonts = fontFamily.toLowerCase().split(',').map(f => f.trim());
// 检查是否有主要字体匹配
if (optionFonts.some(of => currentFonts.includes(of))) {
fontPicker.value = option.value; fontPicker.value = option.value;
matched = true;
break; break;
} }
} }
// 如果没有匹配，默认选择第一个（系统默认）
if (!matched && fontPicker.options.length > 0) {
fontPicker.value = fontPicker.options[0].value;
}
// 更新字号选择器 // 更新字号选择器
const fontSizeValueEl = fontSizePicker.querySelector('.roller-value'); const fontSizeValueEl = fontSizePicker.querySelector('.roller-value');
@@ -1730,7 +1739,7 @@
fontPicker.addEventListener('change', () => { fontPicker.addEventListener('change', () => {
const targetInput = editingInput || selectedInput; const targetInput = editingInput || selectedInput;
if (!targetInput) return; if (!targetInput) return;
targetInput.style.fontFamily = fontPicker.value + ', sans-serif'; targetInput.style.fontFamily = fontPicker.value;
}); });
// 字号选择器 - 密码锁式滚轮 // 字号选择器 - 密码锁式滚轮