css - 自定义字体在 Firefox 中不起作用。

Question

我已经搜索了它的解决方案，我想，我正在按照建议做所有事情，但它仍然无法正常工作。自定义字体适用于 Chrome、IE，但不适用于 Firefox。我已经使用字体生成器来生成字体和代码。我已将 @font-face 代码放在 header 、custom.css 文件(在 theme_root/css/中)以及 style.css 中，但它不起作用。

将它放在 header.php 中:

<style>

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/bebasneue.eot');
    src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
    url('fonts/bebasneue.svg#Bebas Neue') format('svg'),
    url('fonts/bebasneue.woff') format('woff'),
    url('fonts/bebasneue.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
</style>

将它放在 style.css 中:

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

将它放在 custom.css 中:

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

在任何地方工作，除了 Firefox。我很困惑 http://tour.khujbo.com

此外，此字体在 Firefox 的 html 页面中工作正常。我在这个模板中使用了这种字体，它适用于 Firefox:http://khujbo.com .在我看来，Firefox 和 WordPress 组合的问题。

我该怎么办？

Answer 1

我不认为你需要在任何地方定义这个字体。您只能将 CSS 放在 custom.css 中。而且，您在 header.php 中使用错误的 URL 定义了 "Bebas Neue"font-face。 CSS 正在尝试从 http://tour.khujbo.com/fonts/ 获取字体 (woff、ttf 等)。请使用正确的位置更正您的 CSS。

顺便说一句，我的建议是，您只需从 custom.css 放置和加载 CSS，并删除所有其他定义。

希望这能解决您的问题。