如何从统一控制点调整整个React JS Web应用的字体大小

方案一：CSS变量 + React Context（支持动态切换） #

适合需要让用户自定义字号的场景，能实时生效。

1. 全局CSS定义字体变量：

:root {
  --font-size-base: 16px;
  --font-size-sm: calc(var(--font-size-base) * 0.875);
  --font-size-lg: calc(var(--font-size-base) * 1.125);
  --font-size-xl: calc(var(--font-size-base) * 1.25);
}

所有组件的字体大小都通过这些变量设置，比如：

.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }

2. 创建React Context管理字号状态：

import { createContext, useContext, useState, useEffect } from 'react';

const FontSizeContext = createContext();

export function FontSizeProvider({ children }) {
  const [fontSize, setFontSize] = useState(16); // 默认基础字号

  useEffect(() => {
    document.documentElement.style.setProperty('--font-size-base', `${fontSize}px`);
  }, [fontSize]);

  const adjustFontSize = (newSize) => {
    setFontSize(newSize);
  };

  return (
    <FontSizeContext.Provider value={{ fontSize, adjustFontSize }}>
      {children}
    </FontSizeContext.Provider>
  );
}

export function useFontSize() {
  return useContext(FontSizeContext);
}

3. 根组件中包裹Provider：

import { FontSizeProvider } from './FontSizeContext';

function App() {
  return (
    <FontSizeProvider>
      {/* 应用所有组件 */}
    </FontSizeProvider>
  );
}

4. 在设置面板等组件中调用调整方法：

import { useFontSize } from './FontSizeContext';

function SettingsPanel() {
  const { adjustFontSize } = useFontSize();

  return (
    <div>
      <button onClick={() => adjustFontSize(14)}>小号字体</button>
      <button onClick={() => adjustFontSize(16)}>默认字体</button>
      <button onClick={() => adjustFontSize(18)}>大号字体</button>
    </div>
  );
}

方案二：CSS预处理器变量（静态统一控制） #

如果不需要动态切换，仅在开发阶段统一调整字号，用Sass/Less这类预处理器更高效。

以Sass为例：

1. 全局变量文件_variables.scss中定义：

$font-size-base: 16px;
$font-size-sm: $font-size-base * 0.875;
$font-size-lg: $font-size-base * 1.125;

2. 组件样式中引用变量：

@import './variables';

.title {
  font-size: $font-size-lg;
}

.content {
  font-size: $font-size-base;
}

后续只需修改$font-size-base的值，所有引用该变量的样式会同步更新。

方案三：Tailwind CSS配置（适配原子化框架） #

如果项目使用Tailwind，直接在配置文件中修改字体预设：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        base: '16px',
        sm: '0.875rem',
        lg: '1.125rem',
        xl: '1.25rem',
      },
    },
  },
};

需要动态调整的话，可结合CSS变量：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        sm: 'calc(var(--font-size-base) * 0.875)',
        base: 'var(--font-size-base)',
        lg: 'calc(var(--font-size-base) * 1.125)',
      },
    },
  },
};

再搭配方案一的React Context实现动态切换。

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