设置font-family: Garamond, sans-serif为何仍会渲染出衬线字体？

• 首先要明确：标准Garamond本身就是经典衬线字体，不属于无衬线字体范畴。你看到的「Garamond是网页安全字体」的说法本身不严谨，这类说法默认指的是衬线类的标准Garamond，属于衬线组的可选网页安全字体，从来不在无衬线安全字体列表里。
• 你碰到的同名字体不同风格的问题，是因为极少数定制操作系统、第三方字体包会将无衬线衍生款字体命名为「Garamond」，和全平台默认预装的衬线版Garamond重名，才会出现跨系统渲染差异。
• 你原本的写法font-family: Garamond, sans-serif的逻辑缺陷是：只要系统存在任意名称为Garamond的字体，就会优先调用，不会区分风格，所以才会出现部分系统渲染衬线字体的情况。

完全可以实现，推荐两种方案：

方案1：精准指定无衬线款字体全称（优先选择） #

无衬线衍生款的Garamond通常不会直接使用Garamond作为全称，大多会带sans类后缀，比如Garamond Sans、Garamond No.8 Sans等。你可以先确认你要使用的无衬线版本的完整字体名，直接写在字体队列最前，后续接标准无衬线字体即可：

html,body { 
  font-family: "你确认的无衬线Garamond完整名称", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

这种写法只有系统预装了对应名称的无衬线款Garamond才会调用，完全不会匹配到衬线版的标准Garamond，实现成本最低，兼容性最好。

方案2：JavaScript渲染特征检测 #

如果无法确认无衬线款的完整字体名，可以通过渲染尺寸对比实现检测：

1. 提前采集你需要的无衬线Garamond、标准衬线Garamond在同一字号下渲染同一测试文本的宽度差值，设置好判断阈值。
2. 页面加载时创建两个隐藏的测试节点，分别用Garamond和等宽基准字体渲染测试文本，对比宽度差值判断当前系统的Garamond是否为无衬线款。
3. 符合阈值条件则为根节点加类名启用Garamond，否则直接用默认无衬线字体。

示例代码：

// 检测当前系统Garamond是否为无衬线款
function isGaramondSans() {
  const testStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  const testSize = "120px";
  // 创建测试节点
  const testNode1 = document.createElement("span");
  const testNode2 = document.createElement("span");
  // 统一样式，仅字体不同
  const commonStyle = `position:absolute;opacity:0;visibility:hidden;font-size:${testSize};line-height:1;font-weight:400;letter-spacing:0;padding:0;margin:0`;
  testNode1.style.cssText = `${commonStyle};font-family:Garamond, monospace`;
  testNode2.style.cssText = `${commonStyle};font-family:monospace`;
  testNode1.textContent = testStr;
  testNode2.textContent = testStr;
  // 插入DOM计算宽度
  document.body.appendChild(testNode1);
  document.body.appendChild(testNode2);
  const diff = Math.abs(testNode1.offsetWidth - testNode2.offsetWidth);
  // 移除节点
  testNode1.remove();
  testNode2.remove();
  // 阈值需提前根据你的目标无衬线Garamond实测调整
  return diff < 120;
}

// 页面加载完成后执行检测
window.addEventListener("DOMContentLoaded", () => {
  if (isGaramondSans()) {
    document.documentElement.classList.add("use-garamond");
  }
});

对应CSS：

html,body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* 仅检测通过时启用Garamond */
html.use-garamond body {
  font-family: Garamond, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

这个场景属于非常小众的个例，绝大多数开发者不会碰到，本质是早期网上流传的不严谨的网页安全字体列表没有标注字体分类导致的认知偏差。标准的跨平台无衬线网页安全字体队列推荐直接使用system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif，可以覆盖99%以上的场景，不需要额外自定义特殊字体。

内容的提问来源于stack exchange，提问作者Tim Daubenschütz