Ionic - 如何防止特定组件上的动态字体大小？

Question

我使用 ionic 的动态字体大小。我使用属性

在

<html>

标签上设置动态字体大小

html {
  --ion-dynamic-font: var(--ion-default-dynamic-font);
}

但是我遇到了问题，我的

<ion-toolbar>

中的

<ion-header>

也缩放了字体，我想防止这种情况发生。

我尝试将其设置为

<ion-toolbar>

ion-toolbar {
  --ion-dynamic-font: unset;
}

我最初也尝试过。但没有成功。这可能吗？

亲切的问候。

Answer 1

允许 Ionic 支持动态字体缩放但针对各个组件进行调整的最佳解决方案似乎是 CSS

clamp

。

例如，这将动态字体缩放的效果限制在

ion-title

上的 12-18px 范围内：

ion-title {
    font-size: clamp(12px, 100%, 18px);
}

您无需取消设置或覆盖

--ion-dynamic-font

。