Source Sans Pro webfont 抗锯齿问题

Question

我现在有点麻烦，因为我的设计被客户接受了，我刚刚开始网站建设，当我的字体集（Source Sans Pro）明显有问题时。这是：第一张图片是我的设计，第二张是实时页面：

在第三个字体粗细不合适的情况下，更好地说明了探针（底部的红色文本）。看起来字体根本没有抗锯齿，所有的笔画宽度都是 1 或 2 像素，这使得字母“S”或“G”丑陋到地狱。

渲染似乎有问题，但我不知道如何修复它。在css方面，我没有使用任何特殊的东西，这里是相关的代码：

font-size: 13.5px; font-weight: 900; font-family: 'Source Sans Pro', sans-serif;

另外，我正在使用 Google Fonts，通过这种方式链接它（使用 latin-ext 来获取匈牙利字符）：

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900&subset=latin-ext' rel='stylesheet' type='text/css' />

我尝试了以下方法，但没有成功：

  -webkit-font-smoothing: antialiased;
  text-shadow: rgba(0,0,0,.01) 0 0 1px;

我对以下内容进行了一些研究，这有所作为，但实际上是错误的方向：

-webkit-text-stroke: 0.35px;

所以我更担心这是一个与字体相关的问题，而不是与浏览器相关的问题，但我不知道如何开始。

无论如何，如果有人能帮我解决这个问题，我真的很感激，因为我的客户会以其他方式拒绝字体，我必须重新开始整个事情。

谢谢！

Answer 1

删除 WOFF2 作为@font-face src:显着改进的外观。对于给定的屏幕截图，粗体文本并不那么明显，但实际上看起来更好。对于较浅的文本，差异是巨大的。
浏览器：Chrome 80。