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()的流畅缩放字体规则。
全角/半角字符转换器 - 标点与字母宽度统一
一键转换字母、数字、标点符号的全角与半角形式，用于中英文混排规范化。
文字编织花样预览器 - 上/下针符号转图案
输入文字描述或符号（如K, P），生成编织花样预览图，方便织女试读图解。
排料图模拟 - 矩形排版省布
输入矩形布片尺寸，尝试在限定幅宽的布料上手动排列，优化利用率。
字符串排序工具 - 按字母/数字/长度排序
对多行字符串列表进行字母顺序、数字大小、长度等排序，支持升序降序。
基线网格覆盖层生成器 - 垂直韵律对齐
在页面上叠加可调节的基线网格，可视化检查文字是否对齐基线，实现精确排版。
浏览器标签页预览模拟 - 切换主题
设置浏览器标题和图标，模拟在暗色/亮色主题下标签栏的样子。
形状过渡分割线生成 - 页面区块曲线背景
生成用于网页各区块间的波浪或倾斜过渡分割线，导出为SVG或CSS代码。
排序算法可视化 - 冒泡/快排/归并动画
选择算法并随机生成数组，以彩色条动画展示排序过程，帮助理解算法。
灵感拼贴板 - 图片随意拖放排版
上传图片随意摆放、缩放、旋转，创建个人愿景或情绪板。
可变字体调节器 - 拖拽轴权预览
加载可变字体，通过滑块调整字重、字宽、倾斜等注册轴，并导出设置代码。
简易填字游戏创作器 - 单词排布自动生成
提供一组单词与提示，自动生成纵横交错的最优填字布局，导出为图片或HTML。
JavaScript 反混淆简易器 - 美化与变量重命名
对简单混淆的JS进行格式化，并尝试将短变量名替换为更具描述性的名称，提高可读性。
控制台日志样式生成 - %c美化输出
配置字体、颜色、背景，生成可粘贴到浏览器控制台的%c格式化日志代码。
简单文字水印平铺 - 全图文字半透保护
将文字以一定角度和间隔平铺覆盖整张图片，调整透明度，用于快速样图保护。
图像配色方案生成器 - 提取主色并推荐和谐搭配
上传图片，自动提取主色并基于色轮生成类比色、互补色等调色板方案。
代码语法高亮工具 - 在线代码美化展示
粘贴代码自动进行语法高亮显示，支持主流编程语言，生成带行号的HTML代码块，方便嵌入博客。
Markdown转HTML工具 - 在线MD文档转网页
将Markdown文本即时转换为HTML代码，实时预览样式，直接复制HTML用于网站发布。
精灵帧动画生成器 - 多图播放及CSS动画
上传序列帧图片，合成spritesheet并生成对应CSS steps()帧动画代码。
交互式图像分割演示 - 点击分离对象
在图像上点击，利用前端模型将点击范围内的主要物体自动从背景分离。
错误代码速查器 - 常见报错及解决建议
输入常见的报错片段，基于静态库返回常见的解释和可能的修复方案。
删除线文本生成器 - Unicode删除线效果
为每个字符添加Unicode删除线组合符号，生成带删除线的纯文本，适用于格式化受限场景。
代码片段转图片 - 高亮代码导出为美观图片
粘贴代码并选择高亮主题，将代码片段渲染为精美的PNG图片，便于社交媒体分享。
网页CSS变量提取为色板 - 一键查看站点主题色
输入网址，提取页面定义的所有CSS自定义属性（颜色），生成直观调色板。
代码竞速计分板 - 字符数统计
输入代码并自动去除无意义空格，统计有效字符数，用于Code Golf比赛。
开关切换按钮生成器 - iOS/Android风格
生成形似iOS或Android的开关切换按钮，支持动画和自定义颜色。
文字动画GIF生成器 - 闪烁/打字效果
输入文字，选择闪烁、打字、彩虹等动态效果，生成文字动画GIF。
极简Logo生成器 - 图标+文字组合设计
选择简约图标库，搭配字体与颜色，导出PNG简易Logo。