@font-face 在 WordPress 主题中不起作用

Question

我目前正在制作我的在线作品集。正如您所看到的，@font-face 运行起来就像一个魅力。不过，我现在正在将该静态 HTML 转换为动态 Wordpress 主题。这是 @font-face 停止工作的时候。我将首先解释我是如何在静态 HTML/CSS 中完成它的。

我已将字体安装在网站主目录（index.html 所在的位置）中名为“fonts”的文件夹中。使用以下代码，我在 css 文件的顶部声明字体：

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

然后我用 font-family: MaidenOrange 调用该字体；在我的 css 文件的其余部分中。

当我将其转换为 Wordpress 时，我首先复制粘贴了整个样式表，并安装了我在主题目录中创建的“fonts”文件夹。那不起作用（第一次从来没有起作用）。我的第一次 Google 会议给我的印象是它与绝对路径与相对路径问题有关。因此，我将 Wordpress 主题样式表中的 @font-face 声明更改为以下内容：

@font-face {
font-family: 'MaidenOrange';
src: url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.eot');
src: url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.eot?#iefix') format('embedded-opentype'),
     url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.woff') format('woff'),
     url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.ttf') format('truetype'),
     url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.svg#MaidenOrangeRegular') format('svg');
font-weight: normal;
font-style: normal;

}

这仍然不起作用！我的主题只显示 Arial （这是我在 css 中传递的第二个字体）。我用谷歌搜索来解决这个问题，但一无所获。任何帮助将不胜感激！

Answer 1

也许我误读了你写的内容，但我不认为你的 css 文件中可以有 php 代码。尝试将第二个代码块移动到主题的 header.php 文件中，并用

或者，您可以将字体文件夹上传到站点的根目录并使用站点绝对路径，如下所示：

src: url('/fonts/MaidenOrange-webfont.eot');

Answer 2

您不能在 CSS 文件中使用 PHP 标签，除非您专门设置服务器允许它。向我们展示生成的渲染 style.css 可能有助于进一步诊断，但我怀疑这是您的问题。

相对路径应该可以正常工作，所以我怀疑这是你的问题，除非你的路径错误。