Question

我们通过选择一些FontAwesome符号并上传我们自己的自定义SVG字形来生成自定义字体。该应用程序是一个基于Dojo框架的富Web应用程序，并使用Stylus生成CSS，从IIS 7提供应用程序。它已经通过我们的QA测试程序几乎可以提及您可以提及的所有浏览器和环境，除了一个QA家伙在Chrome上安装Win XP。同一台机器上的Firefox和IE工作正常。

这一个Chrome浏览器会显示熟悉的框图标，就像找不到字体文件一样。但是，.woff文件可以在Net窗格中正常加载，具有良好的文件长度，Content-Type（woff-font）等。加载icomoon下载附带的demo.html文件可以使字体正常。

我们不能为我们的生活弄清楚为什么演示文件会正确呈现，但我们的应用程序没有。这只是这台机器上的问题，其他WinXP，Win 7，Win 8，Win 2008和Linux机器上的Chrome渲染得很好。

我们的解决方案是从CSS中删除woff字体规范，因此我们留下了eot，ttf，svg部分。这使Chrome和Firefox回归到TTF渲染，这很好。所以，我们留下了这个：

@font-face {
    font-family: 'ourapp';
    src:url('fonts/ourapp/fonts/ourapp.eot');
    src:url('fonts/ourapp/fonts/ourapp.eot?#iefix') format('embedded-opentype'),
        url('fonts/ourapp/fonts/ourapp.ttf') format('truetype'),
        url('fonts/ourapp/fonts/ourapp.svg#ourapp') format('svg');
// temporarily removed while QAT Chrome is misbehaving url('fonts/ourapp/fonts/ourapp.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
}

我们尝试过使用不同的MIME类型，将icomoon CSS移动到CSS的开头，在字体系列名称周围加上引号而不是撇号，等等，但无济于事。我们打开和关闭了ClearType选项，并尝试使用Chrome开发工具设置来关闭渲染加速等。我们有几个经验丰富的网络开发人员看过这个，但我们看不出有什么不对。对woff文件的HTTP请求似乎很好，ETag很好，在控制台中启用该过滤器时不会报告CSS错误。我们无法随意在另一台机器上重现这个问题。

有人可以建议为什么可以将woff文件下载到Chrome中并使用CSS规则来使用它，但它实际上没有正确呈现吗？它暂时让我们失败了。

icomoon生成的自定义字体无法在一个Chrome浏览器中呈现woff

0 个答案: