html - 柔軟なグリッドによるフォント見出しのスケーリング

Question

下の図のシナリオでは、パーセンテージ ベースの列とガターの幅があります。(テキスト) 列見出しも、幅 100% の画像の場合と同様に、別のデバイスまたはブラウザー幅で表示した場合にサイズを調整したいと考えています。

含まれる要素に合わせてテキストをスケーリングする FitText jQuery 拡張機能をざっと見てみましたが、以下の私のケースでは、見出しを 3 つのカスタム コンテナーに配置し、フォントの高さが一定になるように微調整する必要があります。

また、JavaScript に依存したくありません。

簡単な方法はありますか、それとも弾丸をかじって画像を使用するだけですか?

Answer 1

テキストに画像を使用しないでください *身震い*。

fit-textまたはslab textのいずれかを使用できます(どちらも同じことを行います)。

JS を必要としないソリューションを探している場合は、見栄えが悪くなり始めたテキストを変更するために、いくつかのブレークポイントを追加することを検討する必要があります。それにいくつかのトランジション効果を追加して、少しスムーズにすることもできます。