CSS clamp()函数能否使用负值？如何实现负值参数的流体字间距？

负值参数是否需要调换min、max位置 #

clamp的参数顺序规则和参数正负无关，永远遵循clamp(允许的最小值, 首选动态值, 允许的最大值)的逻辑，底层等价于max(最小值, min(首选动态值, 最大值))。
你当前的写法clamp(-1px, -1vw, -3px)是无效的：因为-1px > -3px，相当于你设定的最小值比最大值还大，表达式最终只会固定返回-1px，不会随视口动态变化。

符合需求的正确写法 #

你的需求是「字体越小（对应视口宽度越小），字间距越大」，对应的逻辑是：

• 视口越大，1vw的绝对值越大，-1vw的数值越小（字间距越紧凑），你能接受的最紧凑的字间距是-3px（最小值）
• 视口越小，1vw的绝对值越小，-1vw的数值越大（字间距越宽松），你能接受的最宽松的字间距是-1px（最大值）
  所以正确的参数顺序应该是把更小的负值（-3px）放在第一个参数位，更大的负值（-1px）放在第三个参数位：

letter-spacing: clamp(-3px, -1vw, -1px);

实现非线性变化的思路 #

如果要实现非线性的字间距变化，可以借助CSS的pow()幂函数调整首选值的变化速率：

• 当幂次>1时，大视口下字间距收紧的速度会比线性更快，小视口下变化更平缓
• 当幂次<1时，小视口下字间距放松的速度会比线性更快，大视口下变化更平缓
  示例写法（幂次取1.2，可根据实际效果调整）：

letter-spacing: clamp(-3px, calc(-1 * pow(1vw, 1.2)), -1px);

如果需要兼容不支持pow()的旧版浏览器，可以通过媒体查询设置多段clamp规则，不同视口区间使用不同的首选值系数，也能近似实现非线性效果。

内容的提问来源于stack exchange，提问作者Patrick Roppel