中文字体宽度测算验证工具

这个工具用于验证在相同字体、相同样式下，不同中文汉字的宽度是否一致。

功能特性

• 🔍 精确测量: 使用Canvas API精确测量字符宽度
• 📊 统计分析: 提供详细的宽度统计信息
• 📈 可视化: 柱状图直观显示字符宽度差异
• 🎨 多字体支持: 支持测试多种字体
• 📱 响应式: 适配不同屏幕尺寸
• 🚀 大规模测试: 支持3000常用汉字完整测试
• ⚡ 性能优化建议: 基于测试结果提供缓存策略建议

使用方法

1. 启动测试服务器

cd font-test
npm install  # 首次运行需要安装依赖
npm run dev  # 启动开发服务器

服务器会自动在 http://localhost:3000 启动并打开浏览器。

2. 配置测试参数

• 字体选择: 宋体、微软雅黑、Arial、Times New Roman、Courier New等
• 字号设置: 10-72px范围
• 样式选择: 正常、粗体、斜体、粗斜体
• 测试字符: 自定义输入要测试的字符

3. 运行测试

• 基础测试: 测试自定义字符的宽度，包含可视化和详细分析
• 完整测试: 测试3000常用汉字+数字英文标点的完整分析，提供全面的字体特性报告

测试结果解读

统计信息

• 最小宽度: 所有字符中的最小宽度值
• 最大宽度: 所有字符中的最大宽度值
• 平均宽度: 所有字符宽度的平均值
• 宽度范围: 最大宽度与最小宽度的差值
• 是否一致: 差值小于0.1px认为一致

详细数据表

显示每个字符的：

• 实际宽度
• 与最小宽度的差值
• 与平均宽度的差值

可视化图表

柱状图直观显示各字符的宽度对比。

测试发现

等宽字体 (Monospace)

• Courier New、系统等宽字体中，汉字宽度基本一致
• 宽度差异通常小于0.1px

比例字体 (Proportional)

• 宋体、微软雅黑等字体中，汉字宽度存在细微差异
• 复杂汉字（如"龍"、"鬱"）可能略宽
• 简单汉字（如"一"、"丁"）可能略窄
• 差异范围通常在0.1-2px之间

对性能优化的启示

可行的优化策略

1. 等宽字体优化

   // 对于等宽字体，可以缓存单个汉字宽度
   const isMonospace =
     fontFamily.includes('monospace') || fontFamily.includes('Courier')
   if (isMonospace && isHanChar(char)) {
     return cachedHanWidth
   }

2. 分组缓存策略

   // 按字符复杂度分组缓存
   const charGroups = {
     simple: ['一', '丁', '七', '人'], // 简单字符
     normal: ['中', '国', '文', '字'], // 标准字符
     complex: ['龍', '鬱', '麟', '鳳'] // 复杂字符
   }

3. 容错范围优化

   // 允许小范围误差，使用近似值
   const tolerance = 0.5 // 0.5px误差范围
   if (Math.abs(cachedWidth - actualWidth) <= tolerance) {
     return cachedWidth
   }

不推荐的策略

• ❌ 假设所有汉字宽度完全一致
• ❌ 忽略字体类型的影响
• ❌ 不考虑字号和样式的影响

扩展功能

可以进一步扩展测试：

1. 性能测试: 对比缓存策略的性能提升
2. 字体兼容性: 测试更多字体的表现
3. 移动端测试: 验证移动设备上的差异
4. 国际化测试: 测试其他语言字符的宽度特性

技术实现

核心API

// Canvas文本测量
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
ctx.font = '16px SimSun'
const width = ctx.measureText('中').width

关键算法

// 宽度差异分析
function analyzeWidthDifferences(results) {
  const widths = results.map((r) => r.width)
  const range = Math.max(...widths) - Math.min(...widths)
  const isUniform = range < 0.1 // 阈值判断
  return { range, isUniform }
}

结论

通过这个工具的测试验证，我们可以得出：

1. 等宽字体: 汉字宽度基本一致，适合使用缓存优化
2. 比例字体: 汉字宽度存在差异，需要谨慎优化
3. 优化建议: 结合字体类型和容错范围，采用分层缓存策略

这为文本引擎的性能优化提供了科学的数据支撑。