SuperAPI AI 工具集

responsive-typography

设计与创作

查看项目

更新于 10-15 21:36

技能介绍

用途:实现流式排版(fluid typography),让字号在视口尺寸之间平滑缩放,无需依赖断点,从而在移动端保持可读、在桌面端尺寸合适,消除字号突变。适用于创建随视口缩放的字体、视口感知的标题,以及为设计系统建立流式字号比例。

主要能力:讲解 clamp(minimum, preferred, maximum) 语法,minimum 为最小字号、preferred 随视口缩放(使用 vw)、maximum 为最大字号;给出流式字号公式 preferred = (slope × viewport) + intercept,其中 slope = (maxSize - minSize) / (maxViewport - minViewport),intercept = minSize - (slope × minViewport),并附 16px@320px 到 20px@1200px 的换算示例。提供 CSS 自定义属性形式的流式字号比例(sm 到 5xl 及 display)、Tailwind 配置、JSON Token 结构、JavaScript 生成函数 fluidType(minSize, maxSize, minVw = 320, maxVw = 1200),以及保守型与表现型两套预置比例。还涵盖标题、正文、Hero 区的用法模式,流式行高与流式间距,容器查询排版(cqi),以及无障碍注意事项。

使用方式:在 :root 中定义 --font-size-* 变量,元素通过 var() 引用;或在 Tailwind 的 theme.fontSize 中配置;或调用 fluidType 生成 clamp 值。字号应使用 rem 而非 px,确保 min < max 并始终设置最大值,preferred 中除 vw 外需加 rem 偏移。

限制与注意:clamp() 需现代浏览器(Chrome 79+、Firefox 75+、Safari 13.1+、Edge 79+),旧浏览器可用媒体查询或 @supports 回退;正文最小不低于 1rem,次要文字不低于 14px;避免缩放过于激进。资料未提供该技能的收费、价格与平台信息。