3

我有一个字体样式 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 文件中的正文）我看不到任何浏览器中应用的字体。我用萤火虫检查过，所有内容都已读取，字体已下载但未应用。
  • 如果我从外部 .css 文件中移动字体定义并将其 INLINE 放入 HTML 中，一切都会正确显示。

如果我从页面内的内联中删除上述代码并将其放在外部 .css 中并放置它而不是样式标签：

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

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

4

1 回答 1

2

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

似乎虽然 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" />

这仅适用于谷歌浏览器。

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

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

于 2013-04-05T21:05:19.807 回答