@ font-face IE9 font-weight不工作 [英] @font-face IE9 font-weight doesn't work

问题描述

我试图用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; 
} 
  

解决方案

规则中指定的 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'）
格式（'embedded-opentype'），
 url（'myFont.woff'）格式b $ b 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'）
格式（'embedded-opentype'），
 url（'myFontBold.woff'）格式b $ b url（'myFontBold.ttf'）format（'truetype'），
 url（'myFontBold.svg＃svgFontName'）format（'svg'）; 
} 
 ... 
 p {
 font-family：myFont; 
} 
 h2 {
 font-family：myFont-bold; 
} 
  

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

这篇关于@ font-face IE9 font-weight不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！