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

  • 本文关键字:字体 成比例 缩放 CSS css
  • 更新时间 :
  • 英文 :


我在这里使用了一种基于视图宽度缩放文本的技术。它使用一个简单的公式在字体大小的设置范围(最小/最大(内平滑缩放,具体取决于设置范围(最大/最小(内的视图宽度。它工作得很好。

但我面临着一个问题,这个和其他技术的流动字体大小。如果我将字母间距设置为一个常数值,它可能会在视觉上崩溃。当字体显示为50px时,以20px显示的字体的1px字母间距可能不理想。

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

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

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

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

我尝试使用calc和视图宽度:

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

它有效,但我认为使用ems更好。

最新更新