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; 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变大但不小？

Answer 1

可能是因为你正在计算（文件）.ready上的字体大小？如果您正在寻找更具动态性的“响应”大小，可以尝试使用resize（）方法吗？ https://api.jquery.com/resize/

如果我误解，我的抱怨。

使用js libs

1 个答案: