34

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

奇怪的是，据说与我添加的代码不兼容的 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;
}

铬合金：

https://dl.dropboxusercontent.com/u/26438996/guru/guru-chrome.png

火狐：

https://dl.dropboxusercontent.com/u/26438996/guru/guru-firefox.png

正如您在上面看到的（可能在网站上），字体在 Firefox 上看起来要好得多。

4

7 回答 7

38

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

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

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

所以基本上你必须将你的字体转换为 svg 格式（使用像松鼠提供的字体转换器）并在你的 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。

于 2013-09-08T20:07:42.723 回答
34

我在这里写了一个关于这个问题的重要答案：谷歌浏览器中是否有任何“字体平滑”？. 该帖子包含您需要知道的所有内容以及如何解决此问题。这是 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;

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

于 2013-07-25T20:21:38.393 回答
19

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

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

    • 进入开始菜单。

    • 搜索“调整 ClearType 文本”。

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

    • 转到开始菜单

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

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

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

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

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

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

    • 点击申请

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

于 2015-07-23T00:19:20.183 回答
3

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

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

于 2014-07-17T09:11:34.127 回答
1

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

所以对我有用的 CSS 是：

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

}

于 2017-04-28T01:27:30.917 回答
1

如果不是 svg，Chrome 不支持抗锯齿，您应该使用文本阴影。

.选择器{
  文字阴影：
    -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}
于 2016-02-22T16:57:01.727 回答
0

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

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

就我而言，我已经启用它并且它工作得很好。

干杯

于 2016-03-14T17:08:02.663 回答