网页字体与无障碍：如何检测浏览器默认字体状态仅在适用时应用Helvetica

你可以通过两种方式实现需求，优先推荐无额外性能开销的配置方案，如果你需要更精准的控制可以使用JS检测方案。

纯CSS方案（优先选择） #

如果你不需要严格区分「用户修改默认字体」和「系统默认字体匹配Helvetica」的场景，直接利用CSS原生的字体优先级规则即可实现：

body {
  /* 把Helvetica放在系统默认无衬线字体前面，仅当Helvetica可用且用户没有强制自定义字体时生效 */
  font-family: Helvetica, "Helvetica Neue", sans-serif;
}

这种方案天然尊重用户的强制字体设置：如果用户在浏览器中配置了强制使用自定义字体，无论你在页面中设置什么字体，都会优先应用用户的配置，不会被覆盖。

JS检测方案（精准控制） #

如果需要严格做到「仅当用户使用浏览器默认字体时才应用Helvetica」，可以通过字体渲染宽度对比实现检测：

function isUsingDefaultSansSerif() {
  const testContainer = document.createElement('div');
  // 隐藏测量容器，避免影响页面布局
  testContainer.style.cssText = `
    position: absolute;
    visibility: hidden;
    top: -9999px;
    left: -9999px;
    font-size: 100px;
    line-height: 1;
    padding: 0;
    border: none;
  `;

  // 选用大小写+数字混合的测试文本，放大不同字体的宽度差异
  const testText = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

  // 用用户当前默认无衬线字体渲染的元素
  const defaultFontEl = document.createElement('span');
  defaultFontEl.style.fontFamily = 'sans-serif';
  defaultFontEl.textContent = testText;

  // 用各主流系统默认无衬线字体渲染的参照元素
  const refFontEl = document.createElement('span');
  refFontEl.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Segoe UI", Roboto, Arial, sans-serif';
  refFontEl.textContent = testText;

  testContainer.append(defaultFontEl, refFontEl);
  document.body.appendChild(testContainer);

  // 对比两个元素的渲染宽度，一致则说明用户使用默认字体
  const result = defaultFontEl.offsetWidth === refFontEl.offsetWidth;
  document.body.removeChild(testContainer);
  return result;
}

// 检测后应用对应字体
if (isUsingDefaultSansSerif()) {
  document.body.style.fontFamily = 'Helvetica, "Helvetica Neue", sans-serif';
}

提示：你可以根据站点适配的操作系统范围调整参照元素的字体列表，进一步提高检测准确率。

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