一尘不染

Chrome浏览器中是否有“字体平滑”功能?

css

我使用的是google webfonts,它们可以使用超大字体,但在18px时看起来很糟糕。我在这里和那里已经读到了一些用于字体平滑的解决方案,但是我还没有找到任何可以清楚解释它的地方,而且我发现的一些代码片段根本不起作用。

h4在几乎所有浏览器中,我的表现都很糟糕,但Chrome最糟糕。在Chrome浏览器中,我的几乎所有字体看起来都很糟糕。

谁能指出我正确的方向?也许您知道可以清楚地说明这一点的资源?谢谢!

示例屏幕#1
此屏幕快照显示了的主页,https://www.dartlang.org/是Google制作的一种编程语言(因此我们可以暗示该网站也由Google构建)并使用Google Webfonts。

屏幕截图在左侧显示Google Chrome,在右侧显示Firefox / Internet Explorer 。:

示例屏幕#2
此屏幕快照使用Typekit提供的webfonts在Adobe.com上显示了产品信息页面。在字体方面,Adobe&Typekit是专业人士。

屏幕截图在右侧显示了Google Chrome,在左侧显示了Firefox / Internet Explorer:


阅读 323

收藏
2020-05-16

共1个答案

一尘不染

第一行为默认行,第二行为:

-webkit-text-stroke: 0.3px;

第三行有:

-webkit-text-stroke: 0.6px;

因此,修复这些字体的方法就是简单地赋予它们

-webkit-text-stroke: 0.Xpx;

或RGBa语法(通过nezroy,在注释中找到!谢谢!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

还有一种过时的可能性:给文本添加简单的(伪)阴影:

text-shadow: #fff 0px 1px 1px;

RGBa解决方案(可在Jasper Espejo的博客中找到):

text-shadow: 0 0 1px rgba(51,51,51,0.2);
2020-05-16