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位于同一目录中。我正在使用firebug进行调试。当我将鼠标悬停在单个文件名上时（如segoewp-light.woff），firebug会显示正确的字体。但是，当我将鼠标悬停在字体系列名称（即'SegoeWP-Light）上时，我会看到常规的衬线字体。显然，网站上的结果字体是serif字体。我不明白出了什么问题。相同的设置适用于普通（非WordPress）页面。我还尝试将字体上传到其他服务并使用绝对公共URL。这也不起作用。

Answer 1

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

如果您的用户位于http://yoursite.com/blog/hello-world，则会在http://yoursite.com/blog/hello-world/segoewp-light.[ext]

查找字体

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

Answer 2

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

Answer 3

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

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

3 个答案: