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

时间:2018-08-02 21:01:51

标签: css

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

但是我在使用这种字体和其他可变字体大小的技术时遇到了问题。如果我将字母间距设置为恒定值,可能会在视觉上损坏。对于以20像素显示的字体,字母间距为1像素可能不适用于以50像素显示的字体。

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

是否有一个可靠的方法来处理这个不稳定的问题,使字母间距与字体大小成比例?

2 个答案:

答案 0 :(得分:1)

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

以下是可能的参考:https://cssreference.io/property/letter-spacing/

答案 1 :(得分:0)

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

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

它可以工作,但是我认为使用ems更好。