php - @font-face WordPress 的 CSS 路径

Question

使用 FontSquirrel 生成的 CSS 代码制作静态版本的网站。 “css”文件夹中的 CSS 样式表，“fonts”文件夹中的字体。显示@font-face 相对路径的 CSS 示例 block :

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

调用 一切正常

font-family: 'TitilliumText22LRegular', Verdana, sans-serif;

现在是 WordPress 模板时间。 WP 使用模板根样式表(“style.css”)。所以从逻辑上讲，如果我将字体存储在“fonts”文件夹中并且只是摆脱“../”路径备份，我应该没问题，因为 WP 样式表位于根目录，并且其中的所有内容都应该引用它自己的位置:

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

但这行不通。回退字体系列和其他字体样式规则工作正常。 WP 样式表在模板根目录下的“img”文件夹中引用图像的类似 CSS 路径结构没有问题。奇怪的是，如果我将字体文件本身移动到模板根目录并像这样直接在样式表中引用它们:

    src: url('TitilliumText22L003-webfont.eot');

一切正常。当然，我不想在模板根目录中转储 40 多个字体文件。可能 WP 需要一些单独的 PHP 文件/规则，为此使用 URL 路径欺骗，比如 blog_info('template_url') 或类似的。但我希望我错过了一些明显的东西!

感谢任何想法

Answer 1

在主题目录(与 样式.css)

也去掉字体名称的所有前缀(没有../ 或/)。

在您要添加的 header.php 文件中:

<link rel="stylesheet" type="text/css" href="<?php echo bloginfo( 'stylesheet_directory' ); ?>/font-face/fonts.css" />

无论如何都适合我的主题。