Chrome不会反文字化文字 [英] Chrome not antialiasing text

问题描述

Google Chrome浏览器并未对我的文字进行抗锯齿处理，即使我已添加专用于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格式（使用字体转换器像字体松鼠提供），并在您的CSS中设置媒体查询，以便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');
}

和voilà。该字体在Chrome中使用抗锯齿功能。

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

这篇关于Chrome不会反文字化文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！