包括Museo在内的字体堆栈在FireFox和Opera中根本不起作用

Question

我用了三种不同的字体。这里是@font

@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;
}

这在Chrome和Safari中工作得很好

然而，在Opera 11.50和Firefox 4.0.1中，坏消息;整个字体栈不起作用，字体呈现为普通的旧衬线字体(恶心!)

我认为问题在于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设置为一次一个选择，看看会发生什么。我还会将font-size和line-height分开，以防出现问题，如下所示:

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