如何通过JavaScript获取浏览器设置中的字体大小？

可以通过脚本获取用户在浏览器外观设置中配置的字体大小，核心思路是利用浏览器根元素的默认字体大小与用户设置的对应关系，以下是两种可靠的实现方式：

方法一：直接读取根元素计算样式 #

浏览器默认情况下，<html>元素的font-size就是用户设置的字体大小，通过getComputedStyle可以获取到这个生效值：

function getBrowserFontSize() {
  const html = document.documentElement;
  const computedStyle = window.getComputedStyle(html);
  return parseFloat(computedStyle.getPropertyValue('font-size'));
}

// 使用示例
console.log(getBrowserFontSize()); // 输出用户设置的字体大小（单位：px，数值形式）

注意 #

如果页面通过CSS全局修改了<html>的font-size（比如为了rem响应式布局调整基准值），这个方法会返回修改后的数值，而非用户原始设置。建议在页面CSS加载生效前执行该脚本，或者使用下面的方法规避样式影响。

方法二：通过无样式测试元素获取 #

创建一个未被页面自定义样式影响的隐藏元素，利用它继承的默认字体大小来获取用户设置：

function getOriginalBrowserFontSize() {
  const testSpan = document.createElement('span');
  // 确保元素不影响页面且不继承自定义样式
  testSpan.style.cssText = 'visibility: hidden; position: absolute; margin: 0; padding: 0; border: none;';
  document.body.appendChild(testSpan);
  const fontSize = parseFloat(window.getComputedStyle(testSpan).fontSize);
  document.body.removeChild(testSpan);
  return fontSize;
}

// 使用示例
console.log(getOriginalBrowserFontSize());

这种方法不受页面根元素样式修改的影响，能准确拿到浏览器默认的用户配置字体大小。

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