Source Sans Pro webfont 抗锯齿问题

Posted 2023-03-05

【中文标题】Source Sans Pro webfont 抗锯齿问题

【英文标题】：Source Sans Pro webfont anti-aliasing issue

【发布时间】：2015-06-21 10:42:20

【问题描述】：

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

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

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

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

另外，我正在使用 Google 字体，通过这种方式链接（使用 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;

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

无论如何，如果有人能提供帮助，我将不胜感激，因为我的客户会以其他方式拒绝该字体，而我必须从头开始。

谢谢！

【问题讨论】：

您使用的是谷歌浏览器吗？

屏幕截图是用 Chrome 制作的，是的。但在 Internet Explorer 11 中，结果是相同的，甚至更糟

我之前在 Adob​​e Photoshop 或 Illustrator 中设计布局时遇到过这个问题。您是否使用过其中一种或其他使用字体抗锯齿技术的软件？

当然，上面显示的第一张图片是我的 Photoshop 文件的打印屏幕。在那里我使用了“sharp”抗锯齿，但除了“none”之外，所有选项都比浏览器中的要好得多。无论如何，我想要的是一种即使价格是“模糊/平滑”效果也可以识别的字体。

这也是我的烦恼，即使在最低设置下，Photoshop 也倾向于进行精美的字体平滑。我实际上也想知道有一个解决方案..

【参考方案1】：

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