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

Posted 2023-03-06

【中文标题】自定义字体在 Firefox 中不起作用。

【英文标题】：Custom font is not working in Firefox.

【发布时间】：2014-07-22 10:33:50

【问题描述】：

我已经搜索了它的解决方案，并且我认为，我正在按照建议做所有事情，但它仍然无法正常工作。自定义字体适用于 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 组合的问题。

我该怎么办？

【参考方案1】：

您必须始终确保在您的网站上使用该字体是合法的。

但是 Firefox 和 Chrome 应该都支持 TTF。

从here.获取更多信息

【参考方案2】：

请确保您已将字体转换为所有格式尝试此站点做http://everythingfonts.com/font-face 并且路径应该是正确的！

@font-face 
font-family: 'GE SS Unique';
src: url('../../fonts/GE_SS_Unique_Light.eot');
src: url('../../fonts/GE_SS_Unique_Light.eot?#iefix') format('embedded-opentype'),
    url('../../fonts/GE_SS_Unique_Light.woff') format('woff'),
    url('../../fonts/GE_SS_Unique_Light.ttf') format('truetype'),
    url('../../fonts/GE_SS_Unique_Light.svg#GE_SS_Unique_Light') format('svg');
font-weight: normal;
font-style: normal;

h1,h2,h3,h4,h5,h6
font-family: 'GE SS Unique';

【参考方案3】：

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

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

希望这能解决您的问题。

【讨论】：

谢谢！从标题中删除 @font-face 解决了这个问题。 header.php 中的字体路径不正确。而且我认为firefox更喜欢header.php而不是custom.css。但其他浏览器正在从 custom.css 导入字体。无论如何，从 header.php 中删除代码后，字体就可以工作了。谢谢