首页 文章

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

提问于
浏览 次
2

我正在线上工作portfolio . 正如你所看到的，@ font-face就像一个魅力 . 但是，当@ font-face停止工作时，我'm now converting that static HTML into a dynamic Wordpress theme. Here' . 我已经在静态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搜索了解决这个问题，但我无处可去 . 任何帮助将非常感激！

css wordpress font-face

2 回答

  • 1

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

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

    src: url('/fonts/MaidenOrange-webfont.eot');
    回复于
  • 4

    您可以't use PHP tags in a CSS file, unless you' ve专门设置您的服务器以允许它 . 向我们显示结果呈现 style.css 可能有助于进一步诊断，但我怀疑这是你的问题 .

    相对路径应该工作得很好，所以我怀疑这是你的问题，除非你有错误的路径 .

    回复于

相关问题