0

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

这是我的带有引导程序 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变大而不变小？

4

1 回答 1

0

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

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

于 2017-11-13T20:04:35.633 回答