流式字号计算器

定义尺寸过渡

1. 输入较小和较大的视口宽度（CSS 像素），两者至少相差 100px，并分别设置对应字号。字号可以增大、减小或保持不变。再输入假定的根字号，即每 rem 对应的 CSS 像素数。
2. 查看当前 CSS 和端点表。更改模型测试宽度可查看另一位置的结果；它会改变模型示例，但不会改变复制的 CSS。卡片本身不是视口。
3. 复制 CSS，在目标页面的非根元素上测试。实际根字号、视口、字体和缩放行为都会影响结果。如果剪贴板不可用，可以手动选择并复制同一条声明。

理解表达方式

计算器将字号差除以视口宽度差，得到斜率；将斜率乘以 100 得到 vw 系数，再根据假定根字号将偏移量和数值边界换算为 rem。

“较小”和“较大”指视口宽度，不一定指字号。字号随宽度减小时，vw 系数为负，而 clamp 的边界仍按数值大小排列。两个字号相同时，结果是更简单的固定 rem 声明。

系数舍入到小数点后六位，恰好处于中间的值朝远离零的方向舍入。表格和示例使用复制出的系数，因此可能与理想插值略有差异。显示的像素值保留三位小数，并标记经过舍入的结果。

根字号只是换算时的假设。目标页面采用不同根字号时，字号边界和过渡宽度都可能改变。rem 相对于文档根元素，vw 相对于视口；更改普通 div 的宽度或字号不能模拟它们。

递增、递减和四舍五入的示例

默认设计在视口宽 320px 时为 16px，在 1600px 时为 32px，假定根字号为 16px。结果为 clamp(1rem, calc(0.75rem + 1.25vw), 2rem)，模型在 960px 时恰好为 24px。

将两个端点字号互换后，结果为 clamp(1rem, calc(2.25rem - 1.25vw), 2rem)。边界仍按数值排序。如果两个宽度下都输入 20px，在相同根字号假设下会得到 font-size: 1.25rem;。

当 360px 对应 17px、1280px 对应 23px 时，六位小数系数在复制的算术模型中分别给出起点 17.0000024px 和中点 20.0000028px。表格会舍入这些值，不表示端点必然精确命中。

创作和模型限制

视口宽度必须是 240–3840 CSS 像素的整数，且至少相差 100px。字号范围为 1–256 CSS 像素，假定根字号为每 rem 8–32 CSS 像素，最多两位小数。符号、输入框中的单位、分组符、指数及多余小数位会被拒绝，不会自动修正。

本工具为非根元素生成一条使用 rem 和 vw 的 font-size 声明。它不导入任意 CSS、不生成完整字号比例、不使用容器单位、不上传字体，也不修改应用的根样式。六位小数的误差界限仅适用于有限算术模型，不代表浏览器的光栅化结果。

示例直接使用算出的像素字号，并在卡片内换行。它不模拟视口，也不能证明复制的 CSS 在目标页面上的效果相同。实际字体、根字号、视口和浏览器精度都可能影响结果。

同时使用 rem 和视口单位并不自动证明文字缩放符合无障碍要求。请在目标页面使用浏览器文字与缩放设置进行测试。本工具不提供通用 WCAG 认证、不保证像素完全一致，也不保证 200% 缩放时字号翻倍。

无需保存设置的本地数字创作

本工具不会上传输入值、请求远程字体、保存草稿历史、生成包含设置的链接或添加包含输入值的遥测。复制由用户主动触发。现有网站服务、浏览器扩展及您保留的副本不在普遍隐私或删除保证的范围内。