带有 WordPress 的 @font-face CSS 路径

Question

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

@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

在主题目录（与style.css 相同级别）添加单独的font-face 文件夹，其中包含字体和font-face css（在我的示例中命名为fonts.css）

也去掉字体名称的all前缀（没有../或/）。

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

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

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