Flutter中如何修改整个应用的字体与字体大小？

修改字体大小同样推荐用全局变量实现，和字体切换的逻辑可以复用，整体维护成本更低，具体实现思路如下：

1. 基础层：全局CSS变量定义 #

优先使用CSS原生自定义属性做全局配置，不需要依赖框架状态管理即可实现全局生效，在全局样式文件中定义变量：

:root {
  /* 全局字体配置 */
  --global-font-family: system-ui, sans-serif;
  /* 全局字号基准值，所有层级字号基于该值派生 */
  --global-font-size-base: 16px;
  /* 派生各场景字号，业务代码直接调用对应变量即可 */
  --global-font-size-h1: calc(var(--global-font-size-base) * 2);
  --global-font-size-h2: calc(var(--global-font-size-base) * 1.5);
  --global-font-size-body: var(--global-font-size-base);
  --global-font-size-small: calc(var(--global-font-size-base) * 0.875);
}

后续业务代码中所有用到字体、字号的位置，统一调用上述变量，不要硬编码固定值。

2. 交互层：切换逻辑实现 #

不管是字体切换还是字号调整，核心逻辑都是修改根节点的CSS变量值，同时持久化用户配置：

• 原生JS实现示例：

// 切换全局字体
function setGlobalFont(font) {
  document.documentElement.style.setProperty('--global-font-family', font);
  // 存储用户配置到本地，下次打开页面自动生效
  localStorage.setItem('user_prefer_font', font);
}

// 调整全局字号
function setGlobalFontSize(baseSize) {
  // 增加边界校验，避免尺寸异常导致布局错乱
  const safeSize = Math.max(12, Math.min(24, baseSize));
  document.documentElement.style.setProperty('--global-font-size-base', `${safeSize}px`);
  localStorage.setItem('user_prefer_font_size', String(safeSize));
}

• 框架场景（Vue/React等）实现：如果项目已经接入了全局状态管理工具（Pinia/Redux等），可以将用户选择的字体、字号同时存入全局store，方便其他业务组件直接读取当前配置做定制化适配，修改后同步更新CSS变量即可。

3. 初始化逻辑 #

页面加载时读取本地存储的用户配置，自动应用上次的设置：

window.addEventListener('DOMContentLoaded', () => {
  const savedFont = localStorage.getItem('user_prefer_font');
  const savedSize = localStorage.getItem('user_prefer_font_size');
  if (savedFont) setGlobalFont(savedFont);
  if (savedSize) setGlobalFontSize(Number(savedSize));
});

• 如果需要支持无障碍适配，可以额外增加「跟随系统字号」选项，通过window.matchMedia API读取系统字体大小偏好自动适配
• 字号调整的交互可以做步进控制，比如每次点击±按钮调整2px，避免用户微调成本过高

内容的提问来源于stack exchange，提问作者eno2