开发者

Font Stack which includes Museo is not working at all in FireFox and Opera

I am using three different fonts. Here is my @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;
}

The first and the third work fine.

The second one is specified for the body tag as:

body, button, input, select, textarea {
font: 16px/1.625 MuseoSans500 "Lucida Grande", "Lucida Sans Uni开发者_C百科code", "Trebuchet MS", sans-serif;
_font-size: 1em;
color: #333;
}

This works perfectly fine in Chrome and Safari

However, in Opera 11.50 and Firefox 4.0.1, bad news; the entire font stack does not work, and the font is rendered as plain old serif (yuck!)

I think the problem is with Museo,as when I take Museo out of the font stack it renders correctly.

I'm using these browsers on Windows 7.


You're missing a comma.

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


Although you are missing that comma now, based on what you said, you were having problems with the MuseoSans500 font for body text. When you removed it you were fine. I think the comma is missing now that you are showing us your code.

I would try setting font-family to one choice at a time and see what happens. I would also separate the font-size and line-height just in case thereby isolating the problem, like so:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜