0

我曾尝试使用 css @font-face 嵌入字体。我想用它作为粗体字体。但 IE 9 不显示粗体字体。

CSS

@font-face {
    font-family: Dauphin;
    src: url('dauphin.woff'),
         url('dauphin.ttf'),
         url('dauphin.eot'),
         url('dauphin.svg')
     ; /* IE9 */
     font-weight: normal;
}
.p {
     font-family: Dauphin;
     font-weight: 900;
}
4

1 回答 1

7

IE 不支持使用与规则font-weight中指定的不同的值@font-face。

每个字体变体的一组字体文件

通常，嵌入的字体文件包含只有一种粗细和一种样式的字体版本。当需要多个字体变体时，为每个字体变体使用一组不同的嵌入字体文件。在下面的示例中，仅使用.woff格式，以简化事情。在实践中，.eot通常也会使用 、 和.ttf。.svg

@font-face {
    font-family: 'myFont';
    src: url('myFont.woff');
    font-weight: normal;
}
@font-face {
    font-family: 'myFont';
    src: url('myFontBold.woff');
    font-weight: bold;
}
...
p {
    font-family: myFont;
    font-weight: normal;
}
h2 {
    font-family: myFont;
    font-weight: bold;
}

支持IE8

但是，当超过 1 个粗细或超过 4 个粗细或样式与字体系列相关联时，IE8 会出现显示问题。要支持 IE8，请为每个字体变体使用不同的字体系列。

@font-face {
    font-family: 'myFont';
    src: url('myFont.woff');
}
@font-face {
    font-family: 'myFont-bold';
    src: url('myFontBold.woff');
}
...
p {
    font-family: myFont;
}
h2 {
    font-family: myFont-bold;
}

最大跨浏览器支持

为了获得最佳的跨浏览器支持，请使用以下语法：

@font-face {
    font-family: 'myFont';
    src: url('myFont.eot');
    src: url('myFont.eot?#iefix')
             format('embedded-opentype'),
         url('myFont.woff') format('woff'),
         url('myFont.ttf') format('truetype'),
         url('myFont.svg#svgFontName') format('svg');
}
@font-face {
    font-family: 'myFont-bold';
    src: url('myFontBold.eot');
    src: url('myFontBold.eot?#iefix')
             format('embedded-opentype'),
         url('myFontBold.woff') format('woff'),
         url('myFontBold.ttf') format('truetype'),
         url('myFontBold.svg#svgFontName') format('svg');
}
...
p {
    font-family: myFont;
}
h2 {
    font-family: myFont-bold;
}
于 2013-03-29T17:27:22.777 回答