包含 Museo 的 Font Stack 在 FireFox 和 Opera 中根本无法工作

Question

我使用三种不同的字体。这是我的@fontface

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

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

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

第一个和第三个工作正常。

第二个为 body 标记指定为：

body, button, input, select, textarea {
font: 16px/1.625 MuseoSans500 "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
_font-size: 1em;
color: #333;
}

This Works Excellent in Chrome and Safari

But, in Opera 11.50 and Firefox 4.0.1, bad news;整个字体堆栈不起作用，并且字体呈现为普通的旧衬线（恶心！）

我认为问题出在 Museo 上，因为当我将 Museo 从字体堆栈中取出时，它会正确呈现。

我在 Windows 7 上使用这些浏览器。

Answer 1

你少了一个逗号。

font: 16px/1.625 MuseoSans500 "Lucida Grande"
font: 16px/1.625 MuseoSans500, "Lucida Grande"
                            ^^^ add this comma

Answer 2

尽管您现在缺少逗号，但根据您所说的，您在使用正文文本的 MuseoSans500 字体时遇到了问题。当你删除它时，你就没事了。我认为现在您向我们展示您的代码时缺少逗号。

我会尝试一次将 font-family 设置为一个选项，看看会发生什么。我还会将字体大小和行高分开，以防万一从而隔离问题，如下所示：

body, button, input, select, textarea {
  font-family: MuseoSans500; /* start with this one by itself */
  font-size: 16px;
  line-height: 1.625;
  color: #333;
}