UD5工具箱
文字颜色对比度检测器 - WCAG无障碍合规测试
输入文字颜色和背景颜色，计算对比度比例，验证是否符合WCAG 2.1的AA/AAA级无障碍标准。
安全字体组合预览 - 各系统回退字体
系统字体检测结果
点击"检测系统字体"按钮开始检测...
* 使用 document.fonts.check() API 检测，结果仅供参考。部分系统字体可能无法准确检测。
📚 常见问题与知识点
Web安全字体是指预装在绝大多数操作系统上的字体，使用这些字体可以最大程度保证网站在不同设备和系统上显示一致。常见的Web安全字体包括 Arial、Helvetica、Times New Roman、Georgia、Courier New、Verdana、Trebuchet MS 等。随着CSS
@font-face 和Web字体服务（如Google Fonts）的普及，"绝对安全"字体的概念逐渐弱化，但合理设置字体回退栈（Font Fallback Stack）仍然是前端开发的基本功。
字体回退栈是CSS
✅ 优先指定目标字体（如设计稿使用的字体）
✅ 中间添加跨平台替代字体（如Segoe UI覆盖Windows、Helvetica Neue覆盖macOS）
✅ 末尾以通用字体族结尾（serif、sans-serif、monospace、cursive、fantasy）
✅ 用引号包裹含空格的字体名（如 "Segoe UI"、"Times New Roman"）
✅ 同时考虑中英文渲染，可在末尾追加中文字体（如 "Microsoft YaHei"、"PingFang SC"）
font-family 属性中按优先级排列的字体列表。浏览器会从左到右依次查找，使用第一个在当前系统上可用的字体。最佳实践：✅ 优先指定目标字体（如设计稿使用的字体）
✅ 中间添加跨平台替代字体（如Segoe UI覆盖Windows、Helvetica Neue覆盖macOS）
✅ 末尾以通用字体族结尾（serif、sans-serif、monospace、cursive、fantasy）
✅ 用引号包裹含空格的字体名（如 "Segoe UI"、"Times New Roman"）
✅ 同时考虑中英文渲染，可在末尾追加中文字体（如 "Microsoft YaHei"、"PingFang SC"）
| 操作系统 | 默认UI字体 | CSS引用方式 |
|---|---|---|
| 🪟 Windows 10/11 | Segoe UI | "Segoe UI" |
| 🍎 macOS | San Francisco (SF Pro) | -apple-system 或 BlinkMacSystemFont |
| 📱 iOS | San Francisco (SF Pro) | -apple-system |
| 🤖 Android | Roboto / Noto Sans | Roboto |
| 🐧 Linux (多数发行版) | DejaVu Sans / Noto Sans | "Noto Sans" |
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif 可以覆盖几乎所有现代设备的系统UI字体。
中文字体的安全选择相对有限，推荐以下策略：
✅ 无衬线中文：
✅ 衬线中文：
✅ 系统UI（推荐）：使用
✅ Web字体方案：使用Google Fonts或Adobe Fonts加载中文字体，但需注意体积优化（中文字体文件通常较大，建议使用子集化）
✅ 无衬线中文：
"PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif✅ 衬线中文：
"Noto Serif CJK SC", "Source Han Serif SC", "SimSun", "STSong", serif✅ 系统UI（推荐）：使用
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif 并让系统自动匹配中文字体✅ Web字体方案：使用Google Fonts或Adobe Fonts加载中文字体，但需注意体积优化（中文字体文件通常较大，建议使用子集化）
等宽字体广泛用于代码展示，推荐的安全字体栈：
✅ 现代代码字体栈：
✅ 经典安全栈：
✅ 各系统默认等宽字体：Windows → Consolas / Courier New；macOS → SF Mono / Menlo；Linux → DejaVu Sans Mono / Noto Mono
✅ 现代代码字体栈：
"SF Mono", "Fira Code", "Cascadia Code", "JetBrains Mono", "Menlo", "Consolas", "Courier New", monospace✅ 经典安全栈：
"Courier New", Courier, "Lucida Console", Monaco, monospace✅ 各系统默认等宽字体：Windows → Consolas / Courier New；macOS → SF Mono / Menlo；Linux → DejaVu Sans Mono / Noto Mono
CSS定义了5种通用字体族，作为字体回退栈的最终兜底：
🔳 serif — 衬线体，笔画末端有装饰线（如 Times New Roman、Georgia）
🔲 sans-serif — 无衬线体，笔画简洁无装饰（如 Arial、Helvetica）
⌨️ monospace — 等宽字体，每个字符宽度相同（如 Courier New、Consolas）
✍️ cursive — 手写体/草书风格（如 Comic Sans MS、Bradley Hand）
🎨 fantasy — 装饰性/艺术字体（如 Impact、Papyrus）
每个浏览器对通用字体族都有默认映射的具体字体。始终以通用字体族结尾是防御性CSS的重要原则。
🔳 serif — 衬线体，笔画末端有装饰线（如 Times New Roman、Georgia）
🔲 sans-serif — 无衬线体，笔画简洁无装饰（如 Arial、Helvetica）
⌨️ monospace — 等宽字体，每个字符宽度相同（如 Courier New、Consolas）
✍️ cursive — 手写体/草书风格（如 Comic Sans MS、Bradley Hand）
🎨 fantasy — 装饰性/艺术字体（如 Impact、Papyrus）
每个浏览器对通用字体族都有默认映射的具体字体。始终以通用字体族结尾是防御性CSS的重要原则。
自定义弹窗设计器 - 替代原生Alert/Confirm
可视化定制弹窗样式、按钮文案和动画，生成替换原生alert的HTML/CSS/JS代码。
假地址生成器增强版 - 符合当地格式
选择国家，生成符合当地格式的随机假地址，包括街道、城市、邮编和电话号码。
WebP图片兼容性回退 - picture/ source标签生成
为图片生成同时支持WebP和传统格式的<picture>标签代码，确保全浏览器兼容。
手写风格字体栈生成 - 系统手写体调用
生成优先调用系统自带手写风格字体的font-family栈，让网页更亲切。
文本自适应容器字号 - 根据宽度缩放字体
输入文本和容器宽度，计算所需的字体大小使文本不换行，利用JS测量实时反馈。
FAQ手风琴生成器 - 问答折叠组件代码
快速创建FAQ样式的手风琴列表，填入问题与答案，生成HTML/CSS/JS交互代码。
Fetch模拟API - 截获请求返回假数据
演示Service Worker或简单代理拦截fetch请求并返回自定义JSON数据。
衣橱随机搭配器 - 导入单品生成穿搭
录入自己的衣物，随机组合生成一套穿搭建议，解决明天穿啥问题。
最小对立体听力训练 - 区分易混淆音
播放 ship/sheep 等成对单词，选择听到的那个，强化辨音能力。
Lottie动画至SVG帧拆分 - 解析关键帧
上传Lottie JSON，解析路径并将所有关键帧导出为单独的SVG文件。
Credential Management演示 - 自动登录与存储
使用PasswordCredential和FederatedCredential存储用户登录信息，并实现一键自动登录。
Postman Collection 在线查看器 - 无需安装解析集合
拖动导出Postman集合JSON文件，浏览器中展示请求分层与细节，方便快速查阅。
演唱会歌单海报生成 - 复古歌单排版
输入艺人名与曲目，自动生成一份模拟演唱会实况的歌单海报图片。
字母头像占位符生成器 - 基于姓名生成纯 CSS 头像
输入名字，生成带有首字母的彩色圆形头像，适合无头像用户使用。
背景滤镜生成器 - CSS backdrop-filter在线
单独对元素背景区域应用模糊、亮度、灰度等滤镜，生成兼容的CSS backdrop-filter属性。
媒体查询构建器 - 组合条件生成CSS
通过下拉选择宽度、高度、分辨率等，逻辑组合并生成完整的@media规则。
PGP密钥对生成器演示 - 浏览器非对称加密
在浏览器生成PGP公私钥对，用于邮件加密与签名验证演示。
内容索引API演示 - 离线可用内容列表
将网页内容添加到浏览器的离线内容索引中，便于用户在下载页面查看。
数字签名在线验证 - JS Web Crypto 签名验签
生成ECDSA或RSA密钥对，对文本签名并使用公钥验证，演示Web Crypto API的签名能力。
高级JSON转CSV - 嵌套对象扁平化与字段选择
将复杂嵌套JSON数组转为CSV，支持选择性展平列和排除字段，适配数据导出需求。
音频可视化组件生成 - 播放器频谱
生成与原生HTML5音频播放器配套的音频频谱可视化组件代码。
JSON Schema 动态表单生成 - 自动构建输入
输入JSON Schema，自动渲染出一个美观可用的表单界面（演示）。
盒模型对比演示 - content-box vs border-box
同时展示两种盒模型下元素的尺寸变化，直观理解宽度计算差异。
形状检测API演示 - 实时条形码/人脸检测
调用摄像头，通过Shape Detection API实时识别图像中的条形码或人脸位置。
Twitter Card预览器 - 推文卡片效果验证
输入meta标签属性，模拟显示Twitter分享卡片的大图或小图样式，检验标记是否正确。
北约音标字母转换 - 字母转Alfa, Bravo...
输入单词，自动逐字母转换为标准的NATO音标读法，方便电话沟通。
急救包物品清单 - 配置检查与补充提醒
标准急救包推荐清单，勾选已有并标记过期日期，提醒更换，居家安全必备。
SAML 断言可视化工具 - 解码并查看身份声明
粘贴Base64编码的SAML Response，解码并格式化显示其中的属性、断言与签名信息，便于调试。
RSA密钥对生成器 - Web Crypto API在线非对称密钥
利用浏览器内置SubtleCrypto生成RSA-OAEP或RSASSA-PKCS1密钥对，并导出为JWK或PEM格式（前端安全）。