使用CSS / jQuery的自适应字体大小

debugcn 发表于 Dev

dev9

我想在div中创建一个响应式文本。

我尝试了jquery-textfill和FlowType，但是它们根本对我不起作用。

FlowType不会使用所有可用空间，仅使用其中一部分（demo），而textfill不考虑高度（demo）。

我是不正确地使用它们，还是想要实现的目标太难了？

我的HTML：

<body>
    <div class="external">
        <div class="internal">Example</div>
    </div>    
</body>

我的CSS：

.internal{width:100%;height:100%}
.external{width:400px;height:50px;}

PS。目前，视口还不够受支持。

流石骑士

编辑：更新了resize事件侦听器。更新小提琴。

据我了解，您希望文本尽可能大，同时仍适合包含在其中<div>，对吗？我的解决方案是<span>在文本周围放置一个与文本的正常大小相符的文本。然后计算容器尺寸和尺寸之间的比率<span>。以较小的比例（宽度或高度）中的较大者为准，使用该比例放大文本。

HTML：

<div class="container">
    <span class="text-fitter">
        text here
    </span>
</div>

JS（jQuery）：

textfit();
$(window).on('resize', textfit);

function textfit() {
    $('.text-fitter').css('font-size', 'medium');
    var w1 = $('.container').width()-10;
    var w2 = $('.text-fitter').width();
    var wRatio = Math.round(w1 / w2 * 10) / 10;

    var h1 = $('.container').height()-10;
    var h2 = $('.text-fitter').height();
    var hRatio = Math.round(h1 / h2 * 10) / 10;

    var constraint = Math.min(wRatio, hRatio);

    $('.text-fitter').css('font-size', constraint + 'em');
}

这是一个小提琴。调整.containerCSS中的尺寸以查看实际效果。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。