Chrome不抗锯齿文字

Question

即使我添加了专门针对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;
}

铬:

火狐:

正如您在上面看到的那样(可能在网站上),在Firefox上看起来更好看.

Answer 1

注意:Chrome 37及更高版本修复了字体抗锯齿功能,因此Chrome的最新版本不再需要此修复程序.

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

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

因此,基本上您必须将字体转换为svg格式(使用字体转换器,如字体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 2

我在这里就这个问题写了一个很大的答案:Google Chrome中是否有"字体平滑"？.该帖子包含您需要知道的一切以及如何解决此问题.这是谷歌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

font-smoothing-trick(结合以上内容):

-webkit-font-smoothing: antialiased;

注意:这些是解决方法,而不是基本问题的真正解决方法.

Answer 3

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

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

1. • 去开始菜单.

   • 搜索"调整ClearType文本".

   • 启用ClearType并完成向导以选择您的设置.(非常简单)这将为下一步设置文本渲染器.(如果你没有设置ClearType,下一步仍然有效,但ClearType看起来更好.)

2. • 去开始菜单

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

   • 这将打开"性能选项"屏幕.

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

   • 如果您选择"让窗口选择"或"最佳外观",那么它很好.但是,如果选择最佳性能,则会禁用系统抗锯齿功能.大多数浏览器(包括Internet Explorer)都忽略此设置.Chrome没有.

   • 重新打开,但保留所有其他性能选项选择"自定义".

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

   • 点击申请

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