@font-face 镀铬渲染答案

【问题标题】：@font-face chrome rendering@font-face 镀铬渲染
【发布时间】：2015-06-15 08:31:56
【问题描述】：

我想知道其他人是否遇到过这个问题 - @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：

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

root .htaccess 也有同样的规则。

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

【问题讨论】：

您找到解决方案了吗？

标签： fonts font-face

【解决方案1】：

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

如果您的项目中有text-rendering: optimizeLegibility;，请为图标类设置text-rendering: auto;，它们应该在Windows Chrome 中呈现。

【讨论】：

【解决方案2】：

似乎 chrome 在渲染字体方面存在一些问题，至少在一些规则方面，您可以查看此post 以获取一些如何改善您的情况的提示以及此页面来自typekit 以更好地了解该过程。

再见

【讨论】：

我认为他可能指的是另一个问题：Icomoon 有时无法在 Windows 7 上的 Chrome 上运行。

【解决方案3】：

老问题，但同样的问题/错误往往会在 Chrome 中持续存在......

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

事实证明，当不是从本地主机提供服务，而是从我的实际服务器提供服务时，它可以正常工作。

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

【讨论】：