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;

Now it's WordPress template time 一切正常。 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 同一级别）添加单独的 font-face 文件夹，其中包含字体和 font-face css（在我的示例中名为 fonts.css） .css）

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

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

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

无论如何，适用于我的主题。