无需登录 数据私有 本地保存

CSS motion-path 路径动画演示 - 元素沿路径运动

64
0
0
0
多模式字符集输入

工具支持三种灵活的字符集输入方式。第一种是手动输入模式,用户可以在文本框中直接输入需要保留的字符,适用于字符数量较少且明确的场景。第二种是文件上传模式,用户可以上传包含目标字符的文本文件(支持 TXT、CSV 等常见格式),工具会自动解析文件内容并提取所有唯一的字符。第三种是预设字符集模式,工具内置了多种常用的字符集预设,包括常用 3500 汉字、常用 7000 汉字、GB2312 全集、标点符号集、数字字母集等,用户只需点击即可快速选择,大大提高了操作效率。

在字符输入过程中,工具会实时统计已输入字符的数量,并以清晰的数字显示在输入区域的下方。当用户输入重复字符时,工具会自动进行去重处理,确保最终的字符集不包含任何重复项。此外,工具还提供了字符搜索功能,用户可以在已输入的字符集中搜索特定字符,方便进行字符集的管理和调整。

字体文件上传与解析

工具支持多种常见字体格式的上传和解析,包括 TTF(TrueType Font)、OTF(OpenType Font)、WOFF(Web Open Font Format)和 WOFF2(Web Open Font Format 2)等。用户可以通过点击上传按钮或直接将字体文件拖拽到上传区域来完成文件上传。上传过程中会显示进度条,让用户清楚地了解上传状态。

文件上传完成后,工具会自动解析字体文件的基本信息,包括字体名称、字体风格(常规、粗体、斜体等)、字符数量、文件大小等。这些信息会以卡片的形式展示在页面上,帮助用户快速了解原始字体的基本情况。如果上传的文件格式不被支持或文件已损坏,工具会给出明确的错误提示,引导用户上传正确的文件。

体积对比分析

工具的核心功能之一是体积对比分析。在完成字符集输入和字体文件上传后,工具会自动计算子集化后的预估文件体积,并与原始字体文件的体积进行对比。对比结果以直观的柱状图和饼图形式展示,让用户一目了然地看到体积缩减的效果。

除了体积对比之外,工具还会计算并显示体积缩减百分比、节省的字节数等关键指标。例如,如果原始字体文件大小为 5MB,子集化后的预估大小为 200KB,工具会显示体积缩减了 96%,节省了约 4.8MB 的传输数据。这些量化的数据有助于开发者评估字体子集化对页面性能的实际影响,并在性能报告中作为优化成果进行展示。

实时字体预览

工具提供了强大的实时预览功能。用户可以在预览区域看到所有目标字符在子集化后的字体中的实际渲染效果。预览区域支持自定义字体大小、行高、字间距等参数,用户可以根据需要调整这些参数来获得最佳的预览效果。

预览功能还支持对比模式,用户可以同时查看原始字体和子集化后字体的渲染效果,并排显示以便进行细致的对比。如果子集化后的字体中存在无法正常显示的字符(例如字形缺失),工具会在预览区域中以醒目的方式标记出来,确保用户不会遗漏任何显示问题。此外,预览区域还支持深色模式和浅色模式的切换,方便用户在不同背景色下检查字体的渲染效果。

导出与分享

在完成字体子集化预览后,用户可以将分析结果导出为多种格式。工具支持将体积对比数据导出为 CSV 或 JSON 格式,方便在性能报告中使用。同时,用户还可以将预览效果截图保存为 PNG 格式的图片,用于技术文档或博客文章中的配图。工具还提供了分享链接功能,用户可以生成一个包含当前分析结果的唯一链接,方便与团队成员分享和协作。