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

Question

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

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

我也不希望依赖 JavaScript。

有没有简单的方法，还是我应该硬着头皮使用图片？

Answer 1

不要将图像用于文本 * 颤抖 *.

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

如果您正在寻找一个不需要 JS 的解决方案，那么您将不得不考虑添加一些额外的断点，以在文本开始看起来很糟糕时进行更改。您还可以在其上添加一些过渡效果以使其更平滑。