css - 使用 w3 total cache plugin for wordpress 生成的缩小 css 文件时如何处理 css 中的相对字体链接

Question

我必须解决另一个开发人员使用自定义主题设置的 wordpress 网站上的一些问题。主题包括 style.css引用同一主题中的字体文件的文件:

@font-face {
    font-family: 'foo';
    src: url('fonts/foo and bar.eot');
         url('fonts/foo and bar.woff') format('woff'),
         url('fonts/foo and bar.ttf')  format('truetype'),
         url('fonts/foo and bar.svg#svgFontName') format('svg');
}

在不缩小的情况下，style.css 文件被加载并且字体指向 <base-url>/wp-content/themes/<theme-name>/fonts .当启用 CSS minfy 功能时，站点无法加载字体文件，因为相关链接仍然相同并且现在指向 <base-url>/wp-content/cache/minify/fonts。 .该位置不存在字体文件夹。

我试过上传主题 fonts/文件夹到 wp-content/cache/minify由于字体文件已重命名为 .old，这没有用多久文件或整个文件夹在服务器端被删除。不知道这是 W3 Total Cache 还是其他进程造成的。

未启用 CDN 支持。 CSS minfy 功能的配置如下所示:

由于我是 Wordpress 的新手，我将不胜感激对我可以研究的解决方案或方法的任何提示。

我知道我可以尝试将字体文件直接嵌入到 css 文件中，但由于文件大小，这种方法并不理想。所以我基本上是在寻找如何使用 W3 Total Cache 扩展处理这个问题的默认方式。

注意:用绝对 url 替换相对 url 不是一个选项，因为该站点在具有子目录和主域级别的不同环境中使用。

更新 我发现这个问题似乎是插件内部的错误，它与使用包含空格的文件名有关。更新了上面的引用代码。 W3 Total Cache 版本为 0.9.6

Answer 1

我正在处理完全相同的问题，我正在处理的 W3 Total Cache 版本是 0.9.7，我不使用空格作为文件名。

我找到的唯一解决方案是使用 Font Awesome 免费 CDN，例如:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" integrity="sha384-DmABxgPhJN5jlTwituIyzIUk6oqyzf3+XuP7q3VfcWA2unxgim7OSSZKKf0KSsnh" crossorigin="anonymous">

您可以将其包含在 header.php 中。这样，您将避免任何 W3 Total Cache 干扰。