UD5工具箱
排版比例预览器 - 模块化比例尺生成
选择基数大小与比例（如黄金比例），预览标题到正文字号层叠样式序列。
精选配对
设置
提示：点击上方精选卡片快速切换配对，也可以分别选择标题和正文字体自由搭配。
字体配对的艺术
The Art of Font Pairing — 优雅组合，提升阅读体验
字体配对是排版设计中至关重要的一环。选择合适的标题与正文字体组合，能够建立清晰的信息层级，引导读者的视线流动，同时传达品牌独特的个性与气质。好的字体搭配让设计作品更具专业感和美感，而糟糕的搭配则会让整体视觉大打折扣。无论是网页设计、品牌标识还是印刷品，掌握字体配对的原则都能让你的作品脱颖而出。
字体配对常见问题
字体配对（Font Pairing）是指选择两种或多种字体组合使用，通常包括一个用于标题的字体和一个用于正文的字体。好的字体配对能建立清晰的视觉层级、增强可读性，并传达特定的情感和品牌调性。设计师通过对比（衬线vs无衬线、粗vs细、传统vs现代）来创造和谐的排版效果。
经典原则是"对比中有和谐"：衬线体标题 + 无衬线体正文（如Playfair Display + Inter）是最常见的优雅组合；无衬线体标题 + 衬线体正文（如Montserrat + Merriweather）则现代而稳重。也可以使用同一字族的不同字重来搭配，或者选择风格相近但细节不同的字体。关键是要确保两种字体有足够的对比度，同时避免风格冲突。
中英文混排时，建议选择风格协调的字体对。例如思源宋体（Noto Serif SC）+ Inter，或者苹方 + Roboto。需要注意中英文字体的x-height（小写字母高度）和笔画粗细是否匹配。Google Fonts 上提供的中文字体如 Noto Sans SC、Noto Serif SC 与西文字体有较好的协调性。对于网页，可以分别设置中英文的 font-family 回退栈。
衬线体（Serif）在笔画末端有装饰性的衬线，传统、优雅、适合长篇阅读（如书籍、杂志）；无衬线体（Sans-serif）简洁现代、清晰利落，适合屏幕阅读和标题展示。搭配时，通常用衬线体做标题展现气质，用无衬线体做正文保证屏幕可读性；反之亦可创造独特的现代感。避免使用两种风格过于接近的字体（如两种相似的衬线体），那样会显得杂乱。
图标字体实时预览 - 输入码点测试大小
粘贴自定义图标字体的Unicode，调节尺寸颜色立即查看效果。
文字情绪板生成器 - 关键词配色与排版
输入代表情绪的关键词，自动匹配配色方案和字体样式，生成情绪板卡片。
快捷键冲突检测与解决方案 - 输入组合查看占用
输入一组快捷键，检测在主流操作系统和浏览器中是否已被系统或软件占用。
流体字体尺寸生成器 - CSS clamp
输入最小视口和最大视口下的字号，生成利用clamp()的流畅缩放字体规则。
SRT 字幕时间调整器 - 整体偏移/伸缩
上传 SRT 字幕文件，整体提前或延迟所有时间戳，或按比例拉伸压缩以匹配视频。
全角/半角字符转换器 - 标点与字母宽度统一
一键转换字母、数字、标点符号的全角与半角形式，用于中英文混排规范化。
Emmet 缩写语法浏览器 - 编写并预览展开
输入 Emmet 缩写，实时显示展开后的 HTML 结构，学习高级 Emmet 技巧。
文字编织花样预览器 - 上/下针符号转图案
输入文字描述或符号（如K, P），生成编织花样预览图，方便织女试读图解。
排料图模拟 - 矩形排版省布
输入矩形布片尺寸，尝试在限定幅宽的布料上手动排列，优化利用率。
字符串排序工具 - 按字母/数字/长度排序
对多行字符串列表进行字母顺序、数字大小、长度等排序，支持升序降序。
基线网格覆盖层生成器 - 垂直韵律对齐
在页面上叠加可调节的基线网格，可视化检查文字是否对齐基线，实现精确排版。
浏览器标签页预览模拟 - 切换主题
设置浏览器标题和图标，模拟在暗色/亮色主题下标签栏的样子。
流体排版 CSS 生成器 - clamp() 函数计算
输入最小/最大字体大小和视口范围，生成精确的 clamp() 值及回退方案。
形状过渡分割线生成 - 页面区块曲线背景
生成用于网页各区块间的波浪或倾斜过渡分割线，导出为SVG或CSS代码。
HTML 输出测试器 - 即时预览代码片段
输入 HTML/CSS/JS 代码，在隔离沙箱中即时渲染，支持控制台捕获。
首屏大图构建器 - 标题/按钮/背景
设计带有大标题、描述、CTA 按钮和背景图的首屏区域，生成完整代码。
排序算法可视化 - 冒泡/快排/归并动画
选择算法并随机生成数组，以彩色条动画展示排序过程，帮助理解算法。
灵感拼贴板 - 图片随意拖放排版
上传图片随意摆放、缩放、旋转，创建个人愿景或情绪板。
可变字体调节器 - 拖拽轴权预览
加载可变字体，通过滑块调整字重、字宽、倾斜等注册轴，并导出设置代码。
简易填字游戏创作器 - 单词排布自动生成
提供一组单词与提示，自动生成纵横交错的最优填字布局，导出为图片或HTML。
JavaScript 反混淆简易器 - 美化与变量重命名
对简单混淆的JS进行格式化，并尝试将短变量名替换为更具描述性的名称，提高可读性。
字符串反转工具 - 按字符/单词/逐字反转
支持对整个字符串或按单词、按行进行反转，并可选择保留或反转 Unicode 字符顺序。
控制台日志样式生成 - %c美化输出
配置字体、颜色、背景，生成可粘贴到浏览器控制台的%c格式化日志代码。
简单文字水印平铺 - 全图文字半透保护
将文字以一定角度和间隔平铺覆盖整张图片，调整透明度，用于快速样图保护。
HTML 拖放 API 演示 - 文件与元素拖拽交互
通过实例展示原生拖放 API 的使用，包括文件拖拽上传和页面元素排序功能。
图像配色方案生成器 - 提取主色并推荐和谐搭配
上传图片，自动提取主色并基于色轮生成类比色、互补色等调色板方案。
代码语法高亮工具 - 在线代码美化展示
粘贴代码自动进行语法高亮显示，支持主流编程语言，生成带行号的HTML代码块，方便嵌入博客。
Markdown转HTML工具 - 在线MD文档转网页
将Markdown文本即时转换为HTML代码，实时预览样式，直接复制HTML用于网站发布。
精灵帧动画生成器 - 多图播放及CSS动画
上传序列帧图片，合成spritesheet并生成对应CSS steps()帧动画代码。