Question

对于服务器方面的问题，我是一个完整的新手，所以请耐心等待。

我遇到问题，我的字体文件没有显示在一台服务器上，但是它们显示在另一台服务器上。

我不确定哪个服务器托管实际文件，因为我只处理html / css。

我的字体声明是：

@font-face {
    font-family: 'Pictos';
    src: url("fonts/pictos-web.eot");
    src: local("?"), url("fonts/pictos-web.woff") format("woff"), url("fonts/pictos-web.ttf") format("truetype"), url("fonts/pictos-web.svg#webfontIyfZbseF") format("svg");
    font-weight: normal;
    font-style: normal;
}

.pictos {
    font-family:'Pictos';
    color:#FC6;
}

css文件链接是：

<link rel="stylesheet" media="screen,handheld" type="text/css" href="css/global.css">

我检查了网络标签，状态代码为301（永久移动）有些图像虽然仍然正确显示，但也被重定向。与css文件中的样式相同。但是，服务器正在以下位置查找文件：

/css/global.css/fonts/pictos-web.woff/

他们应该是这样的：

 /css/fonts/pictos-web.woff

最令人困惑的是，该字体在IE 9-7中正常工作，但不能在FF，Chrome和Safari中正常工作。

Answer 1

.css文件中的url是相对于css文件本身的，而不是使用该css文件的文档。 e.g。

page: http://example.com/dir/subdir/index.php
css:  http://example.com/css/styles.css
         containing: url('foo/bar/img.jpg')

鉴于该布局，浏览器将尝试获取

http://example.com/css/foo/bar/img.jpg
                   ^^^

您的css网址应该是本地绝对的，例如

 url('/foo/bar/img.jpg');
      ^---

确保在没有浏览器级“重定向”的情况下完成正确的路径。

服务器重定向导致字体文件出现问题

1 个答案: