如何订阅系统字体大小变更以实现UI的响应式调整？

不同平台的实现方式有所差异，以下是主流平台的具体方案：

Android #

有两种常用的监听方式：

方式1：通过ContentObserver监听系统设置 #

系统字体大小的配置存于Settings.System.FONT_SCALE，可以注册ContentObserver监听其变化：

// 创建字体大小观察者
private ContentObserver fontScaleObserver = new ContentObserver(new Handler(Looper.getMainLooper())) {
    @Override
    public void onChange(boolean selfChange) {
        super.onChange(selfChange);
        Configuration config = getResources().getConfiguration();
        float newFontScale = config.fontScale;
        // 在这里执行UI更新逻辑，比如重新设置控件字体大小
    }
};

// 在Activity onCreate中注册观察者
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    getContentResolver().registerContentObserver(
        Settings.System.getUriFor(Settings.System.FONT_SCALE),
        true,
        fontScaleObserver
    );
}

// 在销毁时注销观察者，避免内存泄漏
@Override
protected void onDestroy() {
    super.onDestroy();
    getContentResolver().unregisterContentObserver(fontScaleObserver);
}

方式2：重写onConfigurationChanged方法 #

先在AndroidManifest.xml的对应Activity中添加配置：

<activity
    android:name=".MainActivity"
    android:configChanges="fontScale">
</activity>

然后在Activity中重写方法：

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    float newFontScale = newConfig.fontScale;
    // 执行UI适配逻辑
}

iOS #

通过监听系统通知UIContentSizeCategory.didChangeNotification捕获字体大小变化：

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // 注册通知监听
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(handleFontSizeChange),
            name: UIContentSizeCategory.didChangeNotification,
            object: nil
        )
    }

    @objc private func handleFontSizeChange() {
        // 更新UI，比如重新设置使用动态字体的控件
        // 示例：label.font = UIFont.preferredFont(forTextStyle: .body)
    }

    deinit {
        // 移除通知监听
        NotificationCenter.default.removeObserver(self)
    }
}

Web端 #

可以通过两种方式监听：

方式1：监听window.resize事件 #

系统字体大小变化可能触发视口尺寸变化，结合计算根元素字体大小：

window.addEventListener('resize', () => {
    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
    // 根据新的根字体大小调整UI样式或布局
});

方式2：使用MutationObserver监听根元素样式变化 #

直接监听根元素font-size属性的变更：

const root = document.documentElement;
const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
        if (mutation.attributeName === 'style') {
            const newFontSize = parseFloat(getComputedStyle(root).fontSize);
            // 执行UI更新逻辑
        }
    }
});

// 启动监听
observer.observe(root, { attributes: true });

// 不需要监听时停止
// observer.disconnect();

Windows（WPF） #

监听SystemParameters.StaticPropertyChanged事件捕获系统字体大小变化：

public MainWindow() {
    InitializeComponent();
    // 注册事件监听
    SystemParameters.StaticPropertyChanged += SystemParameters_StaticPropertyChanged;
}

private void SystemParameters_StaticPropertyChanged(object sender, PropertyChangedEventArgs e) {
    if (e.PropertyName == nameof(SystemParameters.FontSize)) {
        double newFontSize = SystemParameters.FontSize;
        // 更新UI控件的字体大小
    }
}

protected override void OnClosed(EventArgs e) {
    base.OnClosed(e);
    // 注销事件
    SystemParameters.StaticPropertyChanged -= SystemParameters_StaticPropertyChanged;
}

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