Chrome 不抗锯齿文本

问题描述

即使我添加了特定于 Google Chrome 的代码，Google Chrome 也不会对我的文本进行抗锯齿。

在一个奇怪的问题上，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;
}

chrome ：

火狐：

正如你可以看到上面 (可能在网站上)，字体在 Firefox 上更好看。

最佳解决思路

注意：Chrome 37 及更高版本固定字体抗锯齿，所以 Chrome 的最新版本不再需要修复。

我认为最好的解决方案是将您的字体转换为 svg，如果字体文件格式为 svg，则 Chrome 将渲染具有抗锯齿字体的字体。

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

因此，基本上您必须将您的字体转换为 svg 格式 (使用像 font squirrel 提供的字体转换器)，并在 css 中设置媒体查询，以便在您的字体声明中首先指定 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');
}

和 voilà。该字体在具有抗锯齿功能的 Chrome 中起作用。

次佳解决思路

我在这个问题上写了一个很大的答案：Is there any 「font smoothing」 in Google Chrome? 。该帖子包含您需要知道的一切，以及如何解决此问题。这是 Google Chrome 中的官方错误，浏览器的开发人员已经了解了这些错误，正在修复。

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

text-stroke-fix：

-webkit-text-stroke: 1px

要么

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

text-shadow-trick：

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

要么

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

font-smoothing-trick(与上述组合)：

-webkit-font-smoothing: antialiased;

注意：这些是解决方法，而不是基本问题的真正修复。

第三种解决思路

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

要解决此问题，您必须在 Windows 中设置清除类型的字体，并在性能选项中启用字体平滑。

- 去开始菜单。
- 搜索「调整 ClearType 文本」。
- 启用 ClearType 并通过向导选择您的设置。 (很容易)，这样就建立了下一步的 text-renderer 。 (如果您不设置 ClearType，下一步仍然可以工作，但 ClearType 看起来更好)
- 去开始菜单
- 搜索「调整窗口的外观和性能」
- 这将打开”performance Options” 屏幕。
- 转到第一个标签”Visual Effects”
- 如果您选择「让窗口选择」或”best appearance”，那么它是罚款。但是，如果您选择最佳性能，系统将禁用 anti-aliasing 。大多数浏览器 (包括 Internet Explorer) 忽略此设置。 Chrome 没有。
- 将其重新打开，但保留所有其他性能选项选择”custom” 。
- 列表底部附近点击「平滑边框的屏幕字体」旁边的复选框
- 点击申请

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

第四种思路

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

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

参考文献

Chrome not antialiasing text

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。