Question

我使用插件fittextjs自动调整字体大小，使其适合当前的div宽度。例如，我在<span>：

中使用它

<ion-view class="menu-content" view-title="Polaroid">
    <ion-content>
        <div class="polaroid">
            <div class="polaroid-img">
                <img ng-src="{{polaroid.cropped}}" />
            </div>
            <div class="polaroid-title">
                <span data-fittext style="font-family: {{polaroid.style}}">{{polaroid.title}}</span>
            </div>
        </div>
    </ion-content>
</ion-view>

此处的关键字为data-fittext。当我打开html页面时，可以毫无问题地应用字体大小的调整大小。此外，当我调整大小的字体大小的变化非常好。

现在我向前导航到另一个页面，我可以在其中更改字体样式。字体样式的改变非常有效。当我向后导航时，应用了字体样式..

BUT

fittext不适用。文本大小变得非常小（我猜10px）。我必须调整页面大小，以便fittext再次应用font-size。

为什么fittext在更改font-family后不会应用font-size？

Answer 1

我并不完全按照您所说的字体如何更改来说明，但JS没有检测到字体更改的事件。 FitText只监听resize和orientationchange事件，它是一个非常简单的函数。

在字体发生变化后，我会再次调用fittext。

更新：再次查看您的代码，当polaroid.style更改时，您的字体系列指令可能会覆盖样式属性。这将删除fittext样式。也许使用一个类来表示font-family而不是内联样式

更改font-family后，Fittext不适用

1 个答案: