更改字体系列后 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 页面时，字体大小的调整会毫无问题地应用。另外，当我调整大小时，更改字体大小效果很好。

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

但是

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

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

Answer 1

我没有完全理解你所说的字体是如何改变的，但是没有事件让 JS 检测到字体的改变。 FitText 只监听 resize 和 orientationchange 事件，这是一个非常简单的函数。

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

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

更改字体系列后 Fittext 不适用

Fittext does not apply after changing the font-family

html

javascript

css

fonts

fittextjs