字体面不工作在IE, otf字体

Question

我知道这个问题已经问过很多次了，但是我试了很多次都没能解决。这是我用来导入自定义字体的简单CSS。此外，我使用这个与bootstrap。

@font-face {
    font-family: Montserrat-Black;
    src: url(Montserrat-Black.otf);
}

它不能在IE11中工作。请帮帮我。谢谢你。

Answer 1

Internet explorer使用eot格式(legacy)或woff。看到MSDN

无论如何，我使用以下代码以获得最大的兼容性:

@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 */
}

Answer 2

尝试使用.eot文件格式的Internet Explorer。比如:

@font-face {
    font-family: Montserrat-Black;
    src: url('Montserrat-Black.eot');
    src: url('Montserrat-Black.otf');
}

Answer 3

IE11:如果在开发工具中收到CSS3114错误码，则需要修改字体文件的前几位。这将允许IE安装字体。

Npm模块:你可以使用ttembed-js npm模块，它会为你做修改。https://www.npmjs.com/package/ttembed-js

用法: ttembed-js path/to/Montserrat-Black.otf

Answer 4

如果你有这个问题，并且你的应用程序在IIS上运行，试着在你的web中添加正确的mime类型。正如so用户Martin Buberl在评论

Answer 5

由于这个问题是我搜索到的第一个问题，让我提供我找到的解决方案:

Paul Irish's Bulletproof @font-face Syntax

或者直接使用FontSquirrel.com http://www.fontsquirrel.com/fontface/generator上的生成器，他们还在他们创建的字体套件中提供了"一种CSS语法来统治所有"