Question

我在网页中使用自定义字体。我正在使用4种自定义字体，它只适用于chrome和firefox但只有一种字体（RalewayMedium）适用于ie10其余无法正常工作..问题是什么？

这是我使用的字体：

@font-face {
    font-family: 'OpenSansLight'; /*a name to be used later*/
    src: url('../fonts/OpenSans-Light.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'LatoRegular'; /*a name to be used later*/
    src: url('../fonts/Lato-Regular.ttf'); /*URL to font*/
}

@font-face { //only one works!
    font-family: 'RalewayMedium'; /*a name to be used later*/
    src: url('../fonts/Raleway-Medium.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'OpenSansRegular'; /*a name to be used later*/
    src: url('../fonts/OpenSans-Regular.ttf'); /*URL to font*/
}

Answer 1

我猜它有效，因为您的系统中设置了 Raleway 字体。

要使网络字体与浏览器兼容，您需要这样做：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

有关详细信息，请查看此article。

一些自定义字体不能与`ie10`一起使用

1 个答案: