一些自定义字体不适用于 `ie10`

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 了解更多信息。