Question

我想制作一个使用fittext.js库的自适应字体，但我在指定默认字体大小时遇到问题。

该插件允许我输入字体大小的最小和最大宽度，标题将最小尺寸作为默认大小并且不更改的问题！

这是我的代码

 <div class="notes">
         <h1>Large Title</h1>
         <p>Text about image 1 in slider it may have many many many text</p>
</div>

这里是css

.notes{
position: absolute;
top:30.9%;
left:5.06%;
width:27.9%;
min-height:234px;
height:auto;
color:#ffffff;
font-size: 12px;
background-color: #eb7b7a;
}
div.notes h1{

padding-left: 45px;
width:100%;
float: right;
font-weight: bold;
text-align: center;
font-size: 6em ;
position: relative;
margin-top:54px;


}

我把标签放在标签

之后

$(".notes h1").fitText(1, { minFontSize: '60px', maxFontSize: '105px' });

默认大小为60，在调整窗口大小时仍为60！

我该怎么办？

Answer 1

如果将标题放大，会发生什么？看起来字体大小应该增加以占用可用空间。

如果您展示工作代码，可能会得到更多答案......

Answer 2

CSS提示

确保标题显示：阻止;或显示：inline-block;具有指定的宽度，即宽度：100％。

在CSS中看不到display：block或display：inline-block。请务必遵循他们的自述文件！

https://github.com/davatron5000/FitText.js

自适应字体无效

2 个答案: