@font-face 在本地工作但在上传到托管空间时不工作

Question

我正在建立一个网站，我试图通过名为 Tex Gyre Cursor 的免费字体获得跨浏览器兼容性。到目前为止，我已经尝试了几种通过谷歌搜索发现的方法。

站点 1 , 站点 2 & 站点 3

在 Chrome、Firefox、Safari 和 Opera 上进行本地测试时，它们已经起作用。虽然不在 IE 上。我不会为 IE 而烦恼，因为它是一个巨大的痛苦，我已经将 Tahoma 设置为它的备用字体。

问题出现在我通过 FTP 文件管理器上传我的文件后。虚拟主机是 GoDaddy。

我也上传了字体文件。

我访问该网站，但字体是 Tahoma，这发生在前面提到的所有浏览器上。

我束手无策，无法辨别问题所在。

这是我第一次尝试使用 CSS：

 @font-face{
    font-family:'TexGyreCursor';
        src: url('fonts/texgyrecursor.eot');
        src: local('texgyrecursor'),
             local('texgyrecursor'),
             url('fonts/texgyrecursor.ttf') format('truetype'),
             url('fonts/texgyrecursor.svg#font') format('svg'),
             url('fonts/texgyrecursor.otf');
}

我的第二次尝试：

 @font-face{
    font-family:'TexGyreCursor';
    src: url('fonts/texgyrecursor.eot');
    src: url('fonts/texgyrecursor.otf');
}

如果需要更多信息，请告诉我:)

原文由 Circinus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到过许多字体嵌入问题，无论是托管字体和 CSS 文件在不同的服务器上还是 IE 是绝对的！@？#。

在 IE 中，按 12，这将调出您的开发人员工具并检查显示的错误（如果有）。如果您看到以下任何错误：

 CSS3111: @font-face encountered unknown error.
my-font.eot

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
my-font.eot?

我建议关注我几个月前打开的一个线程，这可能会有所帮助： @font-face import not working in offline website/different host using online fonts via CSS in IE only 。这只是 IE 的问题，所以如果您遇到同样的问题也不要感到惊讶。将字体传输到其他服务器时我遇到了其他问题。

对于任何未来的字体嵌入，我强烈建议使用以下 CSS 代码并确保正确转换所有涉及的文件类型：

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

原文由 Oliver Tappin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我最近遇到了这个问题，我正在使用 xampp 在 Windows 机器上进行设计并上传到 Linux 服务器。我终于弄清楚字体文件是CamelCase，而css代码都是小写的。

它没有打扰我的本地机器，但 linux 将 CAPITALS.font 和 capitals.font 视为 2 个单独的文件。

您可能想检查一下这是否是您拥有的问题。

原文由 David Abraham 发布，翻译遵循 CC BY-SA 3.0 许可协议