包含的 CSS 不加载图像和字体答案

【问题标题】：Included CSS not loading Images and Fonts包含的 CSS 不加载图像和字体
【发布时间】：2013-11-21 06:51:46
【问题描述】：

我创建了一个动态 CSS 加载器，它工作正常，但它没有加载 CSS Images 和 Font-Faces！对这种情况有什么想法吗？

我的 CSS 加载器代码：

<?php
    $mainRoot = realpath($_SERVER["DOCUMENT_ROOT"]);
    ob_start("ob_gzhandler");
    // Set desierd header for Content-Type
    header("Content-type: text/css; charset: UTF-8");
    header("X-Content-Type-Options: nosniff");
    // Load Core Css
    include $mainRoot . '/css/site-style.css';
?>

然后我像下面的文件一样调用上面的脚本，另外我通过htaccess重写规则将css_loader.php重命名为css_loader.css。

<link type="text/css" href="mysite/css_loader.css" rel="stylesheet">

【问题讨论】：

我的第一个猜测是脚本在错误的目录中查找。所以从那时起它对我来说是猜测，但看起来，css的根是站点的根，所以所有路径都应该是相对的。但要进行测试，您可以将一些测试图像（其中包含所有不同的文本左右）放在相关位置，为它们赋予相同的名称，然后查看加载了哪个图像。
你的重写规则是什么？

标签： php css .htaccess

【解决方案1】：

问题可能是图像是使用其相对路径的引用。即：

background-image: url('../images/header.jpg');

当您使用加载器时 - 浏览器将使用新的 css 路径，即：mysite/css_loader.css 作为这些图像路径的基础。

如果可以.. 将 CSS 中的图像路径更改为绝对链接，例如

background-image: url('/assets/images/header.jpg');

【讨论】：

【解决方案2】：

如果此 css 用于其他目的，则链接可能与 /css/ 相关。因为你已经将它包含在你的 php 中，它现在看起来像一个内部样式表，并且浏览器现在看起来相对于 html 页面的 url（可能不是 /css/。）

【讨论】：

【解决方案3】：

我会尝试在 mysite 目录中放置一个静态 css 文件。

您的 CSS 文件中的相对路径似乎有问题。

在静态文件中，您可以尝试包括/省略mysite/ 或css/ 部分，或添加../ 的所有组合。

您还可以打开网络流量分析器（如 Firefox 中集成的网络工具中的分析器）并查看浏览器尝试加载哪些文件。通过这种方式，您可以观察浏览器真正尝试下载哪些文件，并相应地更改 CSS 文件中的相对路径。

【讨论】：