css - 外部 CSS 字体仅在 Chrome 中显示(没有 IE 和 Firefox)

Question

我有一个 font-face CSS:

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

非常简单。问题是:

• 如果我将此字体定义单独保留在其 .css 文件中(并且字体系列应用于不同的标题，另一个 .css 文件中的正文)我看不到任何浏览器中应用的字体。我用 Firebug 检查过，所有内容都已读取，字体已下载但未应用。
• 如果我从外部 .css 文件移动字体定义并将其内联到 HTML 中，一切都会正确显示。

如果我从我页面内的内联中删除上面的代码并将其放在外部 .css 中并用它代替样式标签:

        <link type="text/css" rel="stylesheet" href="/adminskin/default/css/font-families.css" />

.关于为什么会发生这种情况的任何提示？我要疯了。

Answer 1

好的......我找到了这个疯狂的答案。

似乎虽然 Google Chrome 完全没有问题，但 IE 和 Firefox(没有尝试 Safari 或 Opera)都无法处理指向带有字体定义的外部 .css 的绝对 url。因此，虽然这适用于所有浏览器(.css 内部只是字体定义)

<link rel="stylesheet" type="text/css" href="/skinadmin/default/css/font-families.min.css?v=2.0.0.0" />

这仅适用于 Google Chrome。

<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/skinadmin/default/css/font-families.min.css?v=2.0.0.0" />

这不是疯了吗？我认为是。