带有 js 库的基于容器宽度的字体缩放答案

【问题标题】：Font scaling based on width of container with js libs带有 js 库的基于容器宽度的字体缩放
【发布时间】：2018-04-26 14:02:43
【问题描述】：

我正在尝试根据容器的宽度实现字体大小缩放（我希望我的长 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; display: 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 变大了却没有变小？

【问题讨论】：

标签： css twitter-bootstrap-3 responsive-design font-size fittextjs

【解决方案1】：

可能是因为您正在计算 (document).ready 上的字体大小？如果您正在寻找更动态的大小“响应式”，也许可以尝试 resize() 方法？ https://api.jquery.com/resize/

如果我有误解，我深表歉意。

【讨论】：

当我将我的 js 代码放在 (document).ready 代码块之外时，结果相同。