html - Source Sans Pro webfont 抗锯齿问题

Question

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




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



渲染似乎有问题，但我不知道如何修复它。在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。