@font-face IE9 font-weight doesn't work

2019-04-17 04:13发布

I'ver tried to embed a font with css @font-face. And i want use it as a bold font. But IE 9 doesn't display the font bold.

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

1条回答
你好瞎i
2楼-- · 2019-04-17 04:45

IE doesn't support using a different font-weight than was specified in a @font-face rule.

A set of font files for each font variant

Typically, an embedded font file contains a version of the font with only one weight and one style. When multiple font variants are needed, a different set of embedded font files is used for each font variant. In the example below, only the .woff format is used, to simplify things. In practice, .eot, .ttf, and .svg will typically be used as well.

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

Supporting IE8

However, IE8 has display issues when more than 1 weight, or more than 4 weights or styles, is associated with a font-family. To support IE8, use a different font-family for each font variant.

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

Maximum cross-browser support

For the optimal amount of cross-browser support, use the following syntax:

@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;
}
查看更多
登录 后发表回答