更改字体系列后 Fittext 不适用

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 页面时，字体大小的调整会毫无问题地应用。此外，当我调整字体大小的变化时效果很好。

现在我导航到另一个页面，我可以在其中更改字体样式。字体样式的更改效果很好。当我向后导航时，会应用字体样式..

但是

fittext 不适用。文本大小变得非常小（我猜是 10 像素）。我必须调整页面大小，以便 fittext 再次应用字体大小。

为什么 fittext 更改字体系列后不应用字体大小？

Answer 1

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

我会在字体更改后再次调用 fittext。

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