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

Question

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

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

我也不希望依赖 JavaScript。

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

Answer 1

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

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

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