使用灵活网格缩放字体标题

Question

我在下图所示的场景中有基于百分比的柱和装订线宽度。如果在不同的设备或浏览器宽度上查看，我希望（文本）列标题也可以缩放，就像它们是100％宽度图像一样。

我快速浏览了FitText jQuery扩展，它扩展了文本以适应包含元素，但在我的情况下，这将涉及将标题放在三个自定义容器中，调整以确保字体高度一致。

我也不想依赖JavaScript。

是否有一种简单的方法，或者我应该咬紧牙关并使用图像？

Answer 1

不要将图像用于文字* 颤抖 *。

您可以使用fit-text或slab text（两者都做同样的事情）。

如果您正在寻找不需要JS的解决方案，那么您将不得不考虑添加一些额外的断点，以便在文本开始变坏时进行更改。你也可以添加一些过渡效果，使它更平滑。