Open Sans字体在各浏览器中显示锯齿、像素化问题求助

• 首先修正字体名称拼写错误：你当前CSS里写的font-family: 'Open sans'存在大小写错误，正确的官方字体名称是'Open Sans'（S大写），拼写错误会导致浏览器无法正确匹配你引入的Google Fonts资源，反而优先调用本地低质量匹配字体，出现渲染异常。
• 删除无效抗锯齿属性：-webkit-font-smoothing: antialiased仅对macOS平台的webkit内核浏览器生效，对Windows平台的Chrome、Edge、OperaGX无效果，反而可能干扰正常渲染，建议删除该属性，新增text-rendering: optimizeLegibility优化文字渲染优先级。
• 清理浏览器字体缓存：你删除本地系统字体后没有清理浏览器缓存，Chrome系浏览器会缓存之前加载过的字体文件，导致修改不生效。打开对应浏览器的清除浏览数据面板，时间范围选择「所有时间」，仅勾选「缓存的图片和文件」，清除后重启浏览器即可。
• 替换为本地引入字体包：Google Fonts会根据用户UA自动返回适配的字体格式，部分情况下Windows Chrome会拿到渲染质量较差的字体版本，你可以自行下载Open Sans的woff2格式字体包到站点本地，手动编写@font-face规则引入，参考代码如下：

@font-face {
  font-family: 'Open Sans';
  src: url('./fonts/OpenSans-Regular.woff2') format('woff2'),
       url('./fonts/OpenSans-Bold.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

• 排查系统缩放适配问题：如果你的Windows系统设置了非100%的显示缩放比例（常见为125%、150%），小字号字体在非原生缩放比例下很容易出现锯齿，可临时将系统缩放调整为100%验证问题，确认后可给站点根元素添加transform: translateZ(0)触发GPU图层优化，改善缩放场景下的字体渲染效果。

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