Source Sans Pro网页字体反锯齿问题

5
我现在遇到了一些麻烦,因为我的设计被客户接受后,我刚开始构建网站时发现我的字体设置(Source Sans Pro)有问题。 在第一个图像中是我的设计,第二个是实时页面:
在第三个不正确的字重中更好地说明了问题(底部的红色文本)。 看起来字体根本没有抗锯齿效果,所有笔画都是1或2像素宽,这使得字母'S'或'G'非常难看。
似乎渲染出了问题,但我找不到解决方法。 在CSS方面,我没有使用任何特殊的东西,这里是相关代码:
同时,我正在使用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;

我更关心这是否是与字体相关的问题,而不是与浏览器相关的问题,但我不知道如何开始。

无论如何,如果有人能帮忙解决这个问题,我将不胜感激,否则我的客户将拒绝使用该字体,我不得不重新开始整个工作。

谢谢!


你正在使用 Google Chrome 吗? - Bryan Way
这些截图是在 Chrome 中制作的,确实如此。但在 Internet Explorer 11 中结果相同甚至更糟。 - marcias
我之前在设计Adobe Photoshop或Illustrator中的布局时,也遇到过这个问题。你使用了其中一个软件或其他使用字体抗锯齿技术的软件吗? - Bryan Way
当然,上面展示的第一张图片是我的Photoshop文件的截图。我在那里使用了“锐化”抗锯齿,但除了“无”选项外,所有选项都比浏览器中的好得多。无论如何,我想要的是一种即使价格是“模糊/平滑”效果也能被识别的字体。 - marcias
这也是我的烦恼,即使在最低设置下,Photoshop也倾向于进行花式字体平滑处理。我实际上也想知道是否有解决方法。 - Bryan Way
1个回答

0

删除WOFF2作为@font-face src:显著改善了外观。对于给定的屏幕截图,对于更粗的文本来说可能不是那么明显,但实际上它看起来更好。对于较轻的文本,差异是巨大的。
浏览器:Chrome 80。

enter image description here


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接