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;
}
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;
}
来源:https://stackoverflow.com/questions/15707827/font-face-ie9-font-weight-doesnt-work