2

我们通过挑选一些 FontAwesome 符号并上传我们自己的自定义 SVG 字形来生成自定义字体。该应用程序是一个基于 Dojo 框架并使用 Stylus 生成 CSS 的富 Web 应用程序，从 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 开发工具设置来关闭渲染加速等。我们已经让几个非常有经验的 Web 开发人员对此进行了检查，但我们看不出有什么问题。woff 文件的 HTTP 请求似乎很好，ETag 很好，在控制台中启用该过滤器时没有报告 CSS 错误。我们无法随意在另一台机器上重现该问题。

谁能建议为什么 woff 文件可能会下载到 Chrome 并且存在 CSS 规则以使用它，但它实际上并没有正确呈现？它让我们打败了，现在。

4

0 回答 0