Question

我正在Windows 8.1上运行的XAMPP本地服务器上的单独URL中提供静态内容。

我的HOSTS文件定义了三个正在使用的URL，全部解析为127.0.0.1：

127.0.0.1 localhost
127.0.0.1 dynamic
127.0.0.1 static

...其中dynamic和static都是htdocs的文件夹。 XAMPP中的相关目录是：

c:\xampp\htdocs\dynamic
c:\xampp\htdocs\dynamic\css
c:\xampp\htdocs\dynamic\fonts

c:\xampp\htdocs\static
c:\xampp\htdocs\static\css
c:\xampp\htdocs\static\fonts

我的主要网站位于：动态

我的静态内容是：静态

动态网站及其内容加载没有问题。要在动态站点上从静态站点访问映像，我发现我需要的只是在资源之前加上“// localhost / static /”前缀。因此，这有效，图像显示：

<img src="//localhost/static/images/MyImage.jpeg" />

但CSS样式表有些不对劲。它们位于每个主文件夹的css子文件夹中。它们引用的字体同样位于每个主文件夹的fonts子文件夹中。出于测试目的，静态和动态文件夹结构之间的文件夹内容是相同的。

要从动态域引用静态域上的CSS，这会链接到CSS文件而不会出现问题：

<link rel="stylesheet" type="text/css" href="//localhost/static/css/fonts.css" />

如果我查看页面的来源并单击链接，它会显示fonts.css文件的内容，因此肯定会被读取。

内容包含以下定义：

@font-face{font-family:'RobotoSlabRegular';
src:url('../fonts/robotoslab-regular-webfont.eot');
src:url('../fonts/robotoslab-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/robotoslab-regular-webfont.woff') format('woff'),
url('../fonts/robotoslab-regular-webfont.ttf') format('truetype'),
url('../fonts/robotoslab-regular-webfont.svg#RobotoSlabRegular') format('svg');
font-weight:normal;
font-style:normal;}

但是字体没有被读取和应用，即使它们位于指定位置的静态站点上。另一方面，如果我在动态网站上引用相同的CSS和FONTS文件夹，如下所示：

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

...然后它起作用：找到（在动态网站上）并应用字体。

但在前一种情况下，站点代码找到了// localhost / static URL，但未应用引用的CSS文件中的定义。为什么会这样呢？我已经尝试在@ font-face定义中指定完整路径而不是“..”，但似乎没有任何效果。有线索吗？

更新：解决方案

解决方案似乎是将此代码添加到静态域的.htaccess文件中：

<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

网站读取外部URL的CSS但未访问的字体定义

0 个答案: