Question

我想知道是否有其他人遇到过这个问题 - @ font-face字体在Chrome中无法正确呈现，有时他们也会这样做，有时候没有，这实际上是问题，因为我无法追踪到什么问题我自己的。在其他浏览器中一切都很好。我正在使用Icomoon字体及其语法：

@font-face {
    font-family: 'entypo';
    src:url('/fonts/entypo.eot');
    src:url('/fonts/entypo.eot?#iefix') format('embedded-opentype'),
        url('/fonts/entypo.svg#entypo') format('svg'),
        url('/fonts/entypo.woff') format('woff'),
        url('/fonts/entypo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
    font-family: 'entypo';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'entypo';
    font-style: normal;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    line-height:1;
}

.htaccess在fonts文件夹中：

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

root .htaccess具有相同的规则。

所以我不知道还有什么可能是错的，并且弄乱了我的字体。非常感谢您的帮助！

Answer 1

Windows Chrome中有一个known issue，它不会呈现专用区域unicode字符。

如果项目中有text-rendering: optimizeLegibility;，请为图标类设置text-rendering: auto;，并在Windows Chrome中进行渲染。

Answer 2

Chrome似乎在渲染字体方面存在一些问题，至少在某些规则下，您可以查看post有关如何改善您的情况的一些提示以及typekit的此页面了解一下更好的过程。

再见

Answer 3

老问题，但Chrome也存在同样的问题/错误......

这可能对某些人有所帮助。我使用@ font-face指定字体从Chrome获得空白打印预览和打印，但其他浏览器运行良好。

结果证明它不是从localhost提供的，而是从我的实际服务器提供的。

希望我在很多个小时前尝试过这个。

@ font-face chrome渲染

3 个答案: