Html Chrome 没有抗锯齿文本

Chrome not antialiasing text

提问by Jire

Google Chrome is not antialiasing my text even though I added code specific for Google Chrome to do so.

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

On a weird note, Firefox, which was said to be incompatible with the code I had added doesantialias the text appropriately.

在一个怪异的音符，火狐，它被说成是与我添加的代码不兼容不恰当抗锯齿的文本。

Here's the specific CSS styling:

这是特定的 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:

火狐：

As you can see above (and probablyon the website) the font is much better looking on Firefox.

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

回答by sboisse

NOTE: Chrome 37 and later fixed font antialiasing, so this fix is no longer needed in the latest version fo Chrome.

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

---

---

I think the best solution is to convert your font to svg as chrome does render fonts with antialiasing if the font file format is svg.

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

You can get more info here in the article where I found the answer myself: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

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

So basically you must convert your font to svg format (using a font converter like font squirrelprovides) and set media queries in your css so that the svg file format is specified first in your font declaration for chrome, but not for the other browsers.

因此，基本上您必须将您的字体转换为 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');
}

And voilà. The font works in Chrome with antialiasing.

瞧。该字体在具有抗锯齿功能的 Chrome 中工作。

回答by Sliq

I've written a big answer on that issue here: Is there any “font smoothing” in Google Chrome?. The post contains everything you need to know and how to fix this. And this is an official bug in Google Chrome, the developers of the browser already know about it and are working on a fix.

我在这里写了一个关于这个问题的重要答案：谷歌浏览器中是否有任何“字体平滑”？. 该帖子包含您需要了解的所有信息以及如何解决此问题。这是谷歌浏览器中的一个官方错误，浏览器的开发人员已经知道它并正在努力修复。

In short, you can add this to your text rule to make the fonts look much better:

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

text-stroke-fix:

文本笔画修复：

-webkit-text-stroke: 1px

or

或者

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

text-shadow-trick:

文字阴影技巧：

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

or

或者

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

font-smoothing-trick (in combination with the above):

font-smoothing-trick（结合上面的）：

-webkit-font-smoothing: antialiased;

Note: These are workarounds, not a real fix of the basic problem.

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

回答by guymella

This is an issue with windows 7/8, not with Chrome. Chrome used to always render bad. But they fixed that with build 37. However it still accepts windows font rendering preferences. So if you're like me and turn off all the fancy appearance settings in windows then you will need to make one tweak to get chrome to render properly again.

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

To fix this issue you have to set up Clear type fonts in windows and enable font smoothing in performance options.

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

1. • go to start menu.

   • search for "Adjust ClearType Text".

   • enable ClearType and go through the wizard to choose your settings. (very easy) this sets up the text-renderer for the next step. (if you dont set up ClearType the next step will still work but ClearType looks even better.)

2. • go to start menu

   • search for "Adjust the appearance and performance of windows"

   • this opens "performance Options" screen.

   • go to first tab "Visual Effects"

   • if you select "Let windows choose" or "best appearance" then it is fine. However if you choose best performance it disables anti-aliasing system wide. Most browsers (including Internet Explorer) ignore this setting. Chrome does not.

   • to turn it back on, but leave all other performance options select "custom".

   • near the bottom of the list hit the checkbox next to "Smooth edges of screen fonts"

   • hit apply

1. • 转到开始菜单。

   • 搜索“调整 ClearType 文本”。

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

2. • 转到开始菜单

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

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

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

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

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

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

   • 点击申请

Now close and reopen chrome. You will have much better looking text.

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

回答by sboisse

According to this blog: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

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

It will be fixed in Chrome 37. And he is right. I tried it in Chrome Canary and it works.

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

回答by Deandré Thomas

Chrome does not support anti aliased if it is not a svg you should use text shadow in stead.

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

.selector{
  text-shadow:
    -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

回答by David Vaassen

Just set Font weight to Normal. This seems to solve the issue in Chrome.

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

so my CSS that works for me is:

所以对我有用的 CSS 是：

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

}

}

回答by overRideKode

I've searched for a solution to this exact problem for a few hours, and finally I've found something that works for me, so I want to share it with you.

我已经搜索了这个确切问题的解决方案几个小时，最后我找到了对我有用的东西，所以我想与您分享。

Go to chrome://flags/#enable-direct-write If DirectWrite is disable, enable it; If DirectWrite is enable, just disable it;

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

In my case I've enabled it and it worked just fine.

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

Cheers

干杯