Chrome 没有抗锯齿文本 [英] Chrome not antialiasing text

问题描述

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

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

奇怪的是，据说 Firefox 与我添加的代码不兼容确实对文本进行了适当的抗锯齿处理.

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

具体的 CSS 样式如下:

Here's the specific CSS styling:

.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 probably on the website) the font is much better looking on Firefox.

推荐答案

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

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

我认为最好的解决方案是将您的字体转换为 svg，因为如果字体文件格式为 svg，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.

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

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/

所以基本上你必须将你的字体转换为 svg 格式(使用像 font squirrel 提供的字体转换器)和在您的 css 中设置媒体查询，以便在您的 chrome 字体声明中首先指定 svg 文件格式，而不是其他浏览器.

So basically you must convert your font to svg format (using a font converter like font squirrel provides) 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.

/* 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 中使用抗锯齿功能.

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

这篇关于Chrome 没有抗锯齿文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！