Chrome没有抗锯齿文本

Question

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

奇怪的是，据说 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 上看起来更好。

Answer 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;

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

Answer 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 中使用。

Answer 3

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

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

Answer 4

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

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

1. • 转到开始菜单。

   • 搜索“调整 ClearType 文本”。

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

2. • 进入开始菜单

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

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

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

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

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

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

   • 点击应用

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

Answer 5

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

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

Answer 6

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

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

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

干杯

Answer 7

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

所以适合我的 CSS 是：

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

}