CSS 可变形文本

Question

我需要创建一个适应其容器 DIV 大小的文本，扭曲自身以始终填充 DIV 内的整个空间。所以它应该始终是 width=100% 和 height=100% 并根据浏览器窗口调整大小。

我知道这可以用图像来完成，我怀疑是否有任何方法可以对可编辑的文本做同样的事情，使字体形状本身变形。我应该使用哪个属性？

谢谢你的建议。

Answer 1

选项1

我们将使用 Javascript 动态更改 font-size 和 line-height

首先，缓存 div，这样浏览器就不必在每次调整窗口大小时都找到它。

var $div = $('.foo');

在调整窗口大小时运行以下命令，并在开始时触发一次。

$(window).resize(function () {

获取div的当前高度并将其保存为变量。

var height = $div.height();

根据当前高度设置div内文本的font-size和line-height。

$div.css({
'font-size': (height/2) + 'px',
'line-height': height + 'px'
})
}).trigger('resize');

演示:https://jsfiddle.net/nanilab/6tpztvnc/

---

选项 2

您可以使用 FitText.js

FitText 使字体大小灵活。在您的响应式设计中使用此插件，以按比例调整标题大小。

---

选项3

您可以使用 slabText.js

一个 jQuery 插件，用于生成大而粗且响应迅速的标题