WordPress自定义主题CSS调用字体报错，求修复及背景图适配方法

问题原因 #

你的CSS中使用的相对路径url('fonts/xxx')是相对于CSS文件本身的位置（/assets/css/），浏览器会尝试在/assets/css/fonts/下查找字体文件，但实际字体文件存放在/assets/fonts/，路径不匹配导致了404错误。

修复方案（两种方法，优先选第一种） #

方法1：修正CSS中的相对路径 #

通过../回到CSS文件所在目录的上一级（即/assets/），再指向目标目录，这种方法简单灵活，同时适用于背景图的路径调用。

修改后的@font-face代码：

@font-face {
    font-display: swap;
    font-family: "myfont";
    src: url('../fonts/myfont.eot');
    src: url('../fonts/myfont.eot?#iefix') format('eot'),
    url('../fonts/myfont.woff2') format('woff2'),
    url('../fonts/myfont.woff') format('woff'),
    url('../fonts/myfont.ttf') format('truetype'),
    url('../fonts/myfont.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

如果要调用背景图（假设背景图在/assets/images/bg.jpg），CSS写法如下：

.element {
    background-image: url('../images/bg.jpg');
}

方法2：使用绝对路径（适合固定主题目录的场景） #

直接写入字体/背景图的完整绝对路径，缺点是如果主题目录名称修改，路径会失效，不推荐新手长期使用。

示例：

@font-face {
    font-display: swap;
    font-family: "myfont";
    src: url('/wp-content/themes/mytheme/assets/fonts/myfont.eot');
    src: url('/wp-content/themes/mytheme/assets/fonts/myfont.eot?#iefix') format('eot'),
    url('/wp-content/themes/mytheme/assets/fonts/myfont.woff2') format('woff2'),
    url('/wp-content/themes/mytheme/assets/fonts/myfont.woff') format('woff'),
    url('/wp-content/themes/mytheme/assets/fonts/myfont.ttf') format('truetype'),
    url('/wp-content/themes/mytheme/assets/fonts/myfont.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

总结 #

优先选择方法1的相对路径写法，既不需要修改PHP代码，也能适配主题目录的移动，同时完美解决字体和背景图的路径问题。

内容的提问来源于stack exchange，提问作者vimuth