嘿，刚好我之前在Electron项目里处理过类似的无障碍字体适配需求，我来一步步帮你解答：

一、如何通过Node/Electron获取系统无障碍字体大小 #

不同操作系统的获取方式不一样，Electron提供了跨平台的API可以直接调用，纯Node环境则需要借助原生工具或第三方模块：

在Electron中获取 #

• Windows系统：使用Electron的systemPreferences模块获取字体缩放比例：

  const { systemPreferences } = require('electron');
  // 返回值是缩放比例，比如1.0=100%，1.25=125%
  const fontScale = systemPreferences.get('accessibility.fontScale');
  

• macOS系统：通过systemPreferences.getUserDefault读取系统的无障碍字体大小设置：

  const { systemPreferences } = require('electron');
  // 以系统默认16px为基准，计算缩放比例
  const baseFontSize = 16;
  const systemFontSize = systemPreferences.getUserDefault('AXFontSize', 'float');
  const fontScale = systemFontSize / baseFontSize;
  

在纯Node环境中获取 #

如果是纯Node项目（非Electron），需要分别处理：

• Windows：使用winreg模块读取注册表中的字体设置：

  const Registry = require('winreg');
  const regKey = new Registry({
    hive: Registry.HKCU,
    key: '\\Control Panel\\Desktop\\WindowMetrics'
  });
  regKey.get('AppliedDPI', (err, result) => {
    if (!err) {
      // 标准DPI为96，缩放比例=实际DPI/96
      const fontScale = result.value / 96;
      console.log(fontScale);
    }
  });
  

• macOS：通过child_process执行系统命令读取设置：

  const { exec } = require('child_process');
  exec('defaults read NSGlobalDomain AXFontSize', (err, stdout) => {
    if (!err) {
      const baseFontSize = 16;
      const fontScale = parseFloat(stdout.trim()) / baseFontSize;
      console.log(fontScale);
    }
  });
  

二、Electron窗口的字体大小适配与Chromium自动处理 #

Chromium的自动行为 #

首先要明确：Chromium本身会自动响应系统的无障碍字体缩放设置——只要你的CSS使用了相对单位（比如rem、em），页面的字体大小会自动跟着系统设置调整，不需要额外处理。这是Chromium内置的无障碍支持，非常省心。

手动控制窗口默认/最小字体大小 #

如果你想主动将系统字体大小作为窗口的默认或最小字体大小，可以这么做：

1. 设置窗口默认字体大小：在创建BrowserWindow时，通过webPreferences配置默认字体参数：

   const { BrowserWindow } = require('electron');
   const fontScale = systemPreferences.get('accessibility.fontScale'); // 先获取缩放比例
   const mainWindow = new BrowserWindow({
     webPreferences: {
       defaultFontSize: Math.floor(16 * fontScale), // 以16px为基准按比例计算
       defaultMonospaceFontSize: Math.floor(14 * fontScale)
     }
   });
   

2. 设置最小字体大小：可以通过CSS全局设置，或者在页面加载后注入CSS变量动态调整：

   // 主进程向渲染进程发送缩放比例
   mainWindow.webContents.on('did-finish-load', () => {
     mainWindow.webContents.send('set-font-scale', fontScale);
   });
   

   渲染进程接收并设置全局CSS变量：

   const { ipcRenderer } = require('electron');
   ipcRenderer.on('set-font-scale', (event, scale) => {
     document.documentElement.style.setProperty('--system-font-scale', scale);
   });
   

   最后在CSS中定义最小字体：

   html {
     min-font-size: calc(12px * var(--system-font-scale));
     font-size: calc(16px * var(--system-font-scale));
   }
   

三、CSS编写的关键注意事项 #

要确保页面完美适配系统字体缩放，CSS编写时必须注意以下几点：

• 优先使用相对单位：用rem（相对于根元素字体大小）、em（相对于父元素字体大小）或%替代固定的px。比如：

  /* 推荐 */
  .title {
    font-size: 1.5rem;
    margin-bottom: 1em;
  }
  /* 不推荐 */
  .title {
    font-size: 24px;
    margin-bottom: 16px;
  }
  

• 避免固定尺寸的容器：如果用px设置容器的宽度/高度，当字体放大时容易出现文字溢出。改用max-width、min-height或相对单位：

  /* 推荐 */
  .card {
    max-width: 90%;
    min-height: 10rem;
  }
  /* 不推荐 */
  .card {
    width: 800px;
    height: 160px;
  }
  

• 使用CSS变量统一控制：把系统字体缩放比例作为全局CSS变量，方便在各个组件中复用，也便于后续调整。
• 测试多缩放场景：一定要测试100%、125%、150%、200%等不同缩放比例下的页面布局，确保不会出现错乱、文字截断或布局崩溃的情况。
• 不要禁用用户缩放：不要在HTML的meta标签中设置user-scalable=no，要允许用户手动调整缩放，同时尊重系统的无障碍设置。

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