Chrome没有抗锯齿文本

Posted 2023-03-06

【中文标题】Chrome没有抗锯齿文本

【英文标题】：Chrome not antialiasing text

【发布时间】：2013-07-25 21:50:35

【问题描述】：

即使我添加了特定于谷歌浏览器的代码，谷歌浏览器也没有对我的文本进行抗锯齿处理。

奇怪的是，据说 Firefox 与我添加的代码不兼容确实对文本进行了适当的抗锯齿处理。

这是具体的 CSS 样式：

.jumbotron h1 
    color: white;
    font-size: 100px;
    text-align: center;
    line-height: 1;
    /*
     * Webkit only supported by Chrome and Safari.
     */
    -webkit-font-smoothing: antialiased;

铬：

火狐：

正如您在上面看到的（以及可能在网站上），字体在 Firefox 上看起来更好。

【问题讨论】：

我也觉得不错

注意：这已经在这里讨论过：***.com/q/11487427/1114320 有趣的是，这似乎只发生在 Google 浏览器中的 Google Webfonts 上。奇怪...

我发表了一篇博文，包括。修复：How to fix the ugly font rendering in Google Chrome

【参考方案1】：

我在这里写了一个关于这个问题的重要答案：Is there any “font smoothing” in Google Chrome?。该帖子包含您需要知道的所有内容以及如何解决此问题。这是 Google Chrome 中的一个官方错误，浏览器的开发人员已经知道它并正在努力修复。

简而言之，您可以将其添加到您的文本规则中以使字体看起来更好：

文本笔画修复：

-webkit-text-stroke: 1px

或

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

文本阴影技巧：

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

或

 text-shadow: #333 0px 0px 1px; // for black text

字体平滑技巧（结合以上）：

-webkit-font-smoothing: antialiased;

注意：这些是变通方法，不是基本问题的真正解决方案。

【讨论】：

我已经添加了这样的，它并没有太大的区别。 :\

@Jire: 1px 只是一个示例值，也许您需要使用另一个 px 量（根据您的字体大小的高度）。或者尝试其他修复之一（我刚刚更新了我的答案）。

这对某些人来说可能效果很好，但在我的情况下结果很糟糕。

-webkit-text-stroke: 1px 看起来像一个小故障（至少在 chrome 33 中），text-shadow: #333 0px 0px 1px; // for black text 仅适用于非常大的字体，否则它看起来很模糊

@for3st 请看***.com/questions/11487427/…

【参考方案2】：

注意：Chrome 37 及更高版本修复了字体抗锯齿，因此最新版本的 Chrome 不再需要此修复。

---

我认为最好的解决方案是将字体转换为 svg，因为如果字体文件格式为 svg，chrome 会使用抗锯齿渲染字体。

您可以在我自己找到答案的文章中获得更多信息：http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

所以基本上你必须将你的字体转换为 svg 格式（使用像 font squirrel 提供的字体转换器）并在你的 css 中设置媒体查询，以便在你的字体声明中首先为 chrome 指定 svg 文件格式，但不是其他浏览器。

/* This is the default font face used for all browsers. */
@font-face 
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;


/* This font face inherits and overrides the previous font face, but only for chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) 
@font-face 
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');

然后瞧。该字体可在具有抗锯齿功能的 Chrome 中使用。

【讨论】：

它应该被接受，因为它确实解决了问题，没有任何妥协。

此答案很快将不再是最佳答案。 Chrome 37 修复了该问题，因此不再需要使用 svg 字体。

【参考方案3】：

据此博客：http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

它将在 Chrome 37 中修复。他是对的。我在 Chrome Canary 中尝试过，它可以工作。

【参考方案4】：

这是 Windows 7/8 的问题，而不是 Chrome 的问题。 Chrome 过去总是渲染不好。但是他们用 build 37 修复了这个问题。但是它仍然接受 windows 字体渲染首选项。因此，如果您像我一样关闭 Windows 中所有花哨的外观设置，那么您将需要进行一项调整以使 chrome 再次正确呈现。

要解决此问题，您必须在 windows 中设置 Clear type 字体并在性能选项中启用字体平滑。

转到开始菜单。

搜索“调整 ClearType 文本”。

启用 ClearType 并通过向导选择您的设置。 （非常简单）这为下一步设置了文本渲染器。 （如果您不设置 ClearType，下一步仍然可以工作，但 ClearType 看起来会更好。）

进入开始菜单

搜索“调整窗口的外观和性能”

这将打开“性能选项”屏幕。

转到第一个选项卡“视觉效果”

如果您选择“让 Windows 选择”或“最佳外观”，那就没问题了。 但是，如果您选择最佳性能，它会在整个系统范围内禁用抗锯齿。大多数浏览器（包括 Internet Explorer）会忽略此设置。铬没有。

重新打开它，但保留所有其他性能选项选择“自定义”。

在列表底部附近点击“屏幕字体的平滑边缘”旁边的复选框

点击应用

现在关闭并重新打开 chrome。你会有更好看的文本。

【讨论】：

仅供参考，此解决方案是最终用户可能在他/她的计算机上执行的解决方案。其他解决方案适用于构建网站的 Web 开发人员，以便所有访问者都可以看到经过良好抗锯齿处理的文本。

这正是我所需要的，谢谢！

【参考方案5】：

Chrome 不支持抗锯齿，如果它不是 svg，则应使用文本阴影代替。

.选择器 文字阴影： -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;

【参考方案6】：

我已经为这个确切的问题寻找了几个小时的解决方案，最后我找到了适合我的东西，所以我想与你分享。

转到 chrome://flags/#enable-direct-write 如果 DirectWrite 被禁用，则启用它； 如果 DirectWrite 已启用，只需将其禁用即可；

在我的情况下，我已经启用它并且它工作得很好。

干杯

【参考方案7】：

只需将字体粗细设置为正常。这似乎解决了 Chrome 中的问题。

所以适合我的 CSS 是：

h1.hero-title 
font-family: 'Typefacename', cursive;
font-size:7em;
-webkit-font-smoothing: antialiased;
font-weight:normal;