css - @font-face 未在 Wordpress 中加载

Question

我在 Wordpress 的子主题中包含了一些 .ttf 字体。我也有两个独立的开发环境，它们是相同的。在一种情况下，字体加载得很好，但在另一种情况下，字体根本不会加载。我查看检查元素中的错误并查看:

获取 http://thedomain.com/wp-content/themes/theme-child/fonts/Alice-Regular.ttf 它甚至没有说“404”加载失败，还说这行代码在索引页面上，而实际上它在子主题的 style.css 文件中。

对于我所有的非谷歌字体，这是在它们身上发生的事情......但只在一个环境中。路径是 100% 正确的，我在路径前面放了一个“/”，然后把它去掉，我做了绝对路径，几乎所有我能用路径做的音乐椅。

我已经清除了缓存、清除了缓存等所有这些，但就是无法加载字体。

这是 CSS(适用于我的第一个环境)，是的，'fonts' 文件夹与 style.css 位于同一目录中 我什至将字体从文件夹中取出，并将它们放在与 style.css 相同的目录中，并相应地调整 CSS 中的路径 - 不行。

@font-face {
font-family: 'Bazar';
src: url('fonts/Bazar.ttf');
font-weight: bold;
}
@font-face {
font-family: 'Cuban';
src: url('fonts/Cuban.otf');
font-weight: bold;
}
@font-face {
font-family: 'Alice-Regular';
src: url('fonts/Alice-Regular.ttf');
font-weight: bold;
}

Answer 1

以下是您需要了解的有关相对文件路径的所有信息:

Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward

使用@font-face https://css-tricks.com/snippets/css/using-font-face/