Question

我目前正在处理我的在线portfolio。正如你所看到的，@ font-face就像魅力一样。但是，我现在将静态HTML转换为动态Wordpress主题。这是@ font-face停止工作的时候。我将首先解释我是如何在静态HTML / CSS中完成的。

我已将字体安装在我网站主目录中的一个名为“fonts”的文件夹中（index.html所在的位置）。使用以下代码，我在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中传递的第二种字体）。我已经用Google搜索了解决这个问题，但我无处可去。任何帮助将不胜感激！

Answer 1

也许我误读了你写的内容，但我不认为你的css文件中可以有php代码。尝试将第二个代码块移动到主题的header.php文件中，该文件包含在<style>标记中。

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

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

Answer 2

您不能在CSS文件中使用PHP标记，除非您专门设置服务器以允许它。向我们显示结果呈现的style.css可能有助于进一步诊断，但我怀疑这是您的问题。

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

@ font-face无法在Wordpress主题中使用

2 个答案: