JavaScript获取浏览器默认字体大小的实用方法

/**
 * 获取浏览器设置的默认字体大小（以像素为单位）。
 * @returns {number} 浏览器默认字体大小，如果获取失败则返回默认值16。
 */
function getBrowserFontSize() {
  const defaultFallbackSize = 16; // 定义一个获取失败时的备用默认字体大小

  try {
    // 1. 创建一个临时的DOM元素（例如一个按钮），并将其添加到文档体中
    const tempElement = document.createElement("button");
    tempElement.style.display = "none"; // 隐藏元素，不影响页面布局
    tempElement.style.fontSize = "initial"; // 将字体大小设置为initial，使其采用浏览器默认值
    document.body.append(tempElement);

    // 2. 获取该元素的计算样式
    const computedStyle = window.getComputedStyle(tempElement);
    const fontSizeValue = computedStyle.getPropertyValue("font-size");

    // 3. 使用正则表达式解析字体大小值（通常为"XXpx"格式）
    const fontSizeMatch = fontSizeValue.match(/^(\d*\.?\d*)px$/);

    // 4. 移除临时元素
    tempElement.remove();

    // 5. 检查解析结果并返回
    if (!fontSizeMatch || fontSizeMatch.length < 1) {
      return defaultFallbackSize; // 如果匹配失败，返回备用默认值
    }

    const result = Number(fontSizeMatch[1]);
    return !isNaN(result) ? result : defaultFallbackSize; // 如果解析出的不是有效数字，也返回备用默认值
  } catch (e) {
    console.error("获取浏览器字体大小时发生错误:", e);
    return defaultFallbackSize; // 发生异常时返回备用默认值
  }
}

// 示例：在控制台输出获取到的浏览器默认字体大小
console.log("当前浏览器默认字体大小为:", getBrowserFontSize(), "px");

// 你可以在这里使用获取到的字体大小进行进一步的计算或调整
// const userDefaultFontSize = getBrowserFontSize();
// document.documentElement.style.setProperty('--browser-default-font-size', `${userDefaultFontSize}px`);