@font-face 修复了 IE 9 及更高版本，但在 IE 8 中引入了新问题

Question

早安，

最初，我有一个font-face，它在除 IE 9 及更高版本之外的所有浏览器中都能正常工作：

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

为了解决这个问题，我添加了另一个font-face：

/* To fix IE 9 and above bold issue */
@font-face {
    font-family: 'dax-regularregular';
    src: url('../fonts/daxbold-webfont.eot');
    src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/daxbold-webfont.woff') format('woff'), 
         url('../fonts/daxbold-webfont.ttf') format('truetype'),
         url('../fonts/daxbold-webfont.svg#dax-regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

这解决了我在 IE 9 及更高版本中的问题，但是，它在 IE 8 中引入了新问题。即，正常单词会加粗，而加粗的单词会变得“更粗”（变得更胖）。我从网上看到，IE 8 不支持 WOFF 格式的@font-face 规则（仅支持 EOT 格式）。所以，我取出了除eot之外的那些url，但仍然面临问题。

我将我的 css 代码更改为如下，但在 IE 8 中仍然遇到同样的问题：

@font-face {
    font-family: 'dax-regularregular';
    src: url('../fonts/daxbold-webfont.eot');
    src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: bold;
}

我原来的问题是font-family crash with @font-face src

请多多指教。

Answer 1

试试这个：

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
        url('myfont-webfont.woff') format('woff'), 
        url('myfont-webfont.ttf')  format('truetype'),
        url('myfont-webfont.svg#svgFontName') format('svg');
}