@font-face 无法使用自定义 WordPress 主题

Question

我正在开发主题不那么流行和深刻的 WordPress。可以肯定地说，它是一个完全自定义的主题。我面临的问题是关于@font-face。我在这里有工作字体结构：http://akshay2000.pcriot.com/Trial/index1.html
我用我的 WordPress 主题创建了相同的结构。它没有用。现在，我的 CSS 如下：

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

字体文件与 style.css 和 index.php 位于同一目录中。我正在使用萤火虫进行调试。当我将鼠标悬停在单个文件名（如 segoewp-light.woff）上时，萤火虫显示正确的字体。但是，当我将鼠标悬停在字体系列名称（即“SegoeWP-Light”）上时，我会看到常规衬线字体。显然，现场生成的字体是衬线字体。我不明白出了什么问题。相同的设置适用于普通（非 WordPress）页面。我还尝试将字体上传到不同的服务器并使用绝对公共 URL。那也没用。

Answer 1

我不知道这是否会有所帮助，但这就是 fontsquirrel 必须说的 Troubleshooting Font-Face Problems。

Answer 2

这可能与您使用相对路径有关，但需要更多信息，您可以打开控制台并告诉我们您看到的错误吗？此外，这些文件相对于您的站点根目录位于何处？

如果您的用户位于http://yoursite.com/blog/hello-world，它将在http://yoursite.com/blog/hello-world/segoewp-light.[ext] 处查找字体

您可能需要指定这些文件的绝对路径。

Answer 3

问题确实是关于字体的路径。我将 WordPress 托管在 http://indestructible.in/wp 和子域 http://blog.indestructible.in 指向该目录。当 CSS 尝试在子域上加载字体时，字体将从主域加载。如上所述，Firefox 和 IE 需要它们位于同一个域中。 （这在某些情况下可能有效，但在我的情况下，主域和子域有单独的 A 记录。因此，它们可能会被区别对待。）这就是为什么当浏览器直接指向目录时一切正常的原因。我所做的是，我在子域上创建了一个全新的 WordPress 安装，一切都运行得很好！
TL;DR: Firefox 和 IE 需要在同一个域上使用 @font-face 字体，而且它总是最好直接在子域上安装 WordPress，而不是将子域指向 WordPress 目录。