CSS缩放字母间距与流体字体大小成比例

Question

我正在使用一种基于视图宽度缩放文本的技术here。它使用一个简单的公式在字体大小的设定范围（最小/最大）内平滑缩放，具体取决于设定范围（最小/最大）内的视图宽度。效果很好。

但我在使用这种技术和其他用于流体字体大小的技术时遇到了问题。如果我将字母间距设置为恒定值，它可能会在视觉上崩溃。以 20px 显示的字体的 1px 字母间距可能不适用于以 50px 显示的字体。

在某些情况下，用户可能会更改字体大小。这将是同样的问题。

有没有一种可靠的方法来处理这个流动的问题，使字母间距与字体大小成正比？

Answer 1

尝试使用em单位来控制间距。

这是一个可能的参考：https://cssreference.io/property/letter-spacing/

Answer 2

我尝试使用 calc 以及视图宽度：

letter-spacing: calc(1px + (10 - 1) * ((100vw - 320px) / (1440 - 320)));

它有效，但我认为使用 em 更好。