css - 基于带有 js 库的容器宽度的字体缩放

Question

我正在尝试根据容器的宽度实现字体大小缩放(我希望我的长 h1 在一行中)。

这是我的带有 bootstrap 3 的 HTML:

<div class="someclass">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="responsive-headline">LONG TEXT IS
                LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</h1>
                <ul class="breadcrumbs">
                    ...
                </ul> 
            </div>
        </div>
    </div>
</div>

CSS 样式:

.responsive-headline {
    margin: 0px 0px 3px;
    color: #fff;
    text-transform: uppercase;
    font-size: 32px;
    letter-spacing: 1.7px;
    line-height: 1.4;
}

好的。让我们从FitText.js开始图书馆:

jQuery(document).ready(function($) {
   $('.responsive-headline').fitText();
});

结果 font-size: 114px;!什么？ 添加一些参数:

$('h1.responsive-headline').fitText(1.2, { minFontSize: '18px',
maxFontSize: '32px' });

结果 font-size: 32px;。更好但不是我想要的，我需要更小的字体大小。还尝试添加 width: 1000px;显示: block ； white-space: nowrap; 到 h1 没有成功。

我尝试的第二个库是 FlowType.js .添加一些代码:

jQuery(document).ready(function($) {
   $('h1.responsive-headline').flowtype();
});

结果 font-size: 32.5714px;。比默认大一点。 并带有参数:

$('h1.responsive-headline').flowtype({
    minFont   : 12,
    maxFont   : 32
});

结果 font-size: 32px;.

为什么我的h1变大了而不是变小了？

Answer 1

可能是因为您正在计算(文档)上的字体大小。准备好了吗？ 如果您正在寻找更动态的“响应式”调整大小，也许可以尝试使用 resize() 方法？ https://api.jquery.com/resize/

如果我误解了，我很抱歉。