下面是一个离子React的例子（因为我使用的是React，而不是Angular ），但基本原理应该是相同的。
Ionic 6大量使用CSS变量，所以我的解决方案是在variables.css中添加字体大小变量：

:root {
  /* https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/ */
  --app-text-size-base: 1.25rem; /* Assumes 16px base size. */
  --app-text-size-title: calc(var(--app-text-size-base) * 1.2); /* 24px */
  --app-text-size-title-h1: calc(var(--app-text-size-base) * 1.3); /* 26px */
  --app-text-size-title-h2: calc(var(--app-text-size-base) * 1.2); /* 24px */
  --app-text-size-title-h3: calc(var(--app-text-size-base) * 1.1); /* 22px */
  --app-text-size-title-h5: calc(var(--app-text-size-base) * 0.9); /* 18px */
  --app-text-size-title-h6: calc(var(--app-text-size-base) * 0.8); /* 16px */
  /* iOS default big size */
  --app-text-size-small: calc(var(--app-text-size-base) * 0.85); /* 17px */
  --app-text-size-half: calc(var(--app-text-size-base) * 0.5); /* 10px */
  --app-text-size-half-negative: calc(var(--app-text-size-half) * -1); /* -10px */

在一些地方，Ionic采用固定的字体大小，所以我不得不进行各种调整;请参阅我的gist here中的text.scss。
完成后，您可以使用一个简单的函数来设置CSS变量（React TypeScript示例）：

const setThemeTextSize = (newTextSize: string): void => {
  const root = document.querySelector(':root') as HTMLElement;
  if (root) {
    root.style.setProperty('--app-text-size-base', `${newTextSize}px`);
  }
};