字体在 IE 中不起作用，otf 字体答案

【问题标题】：Font-face not working in IE, otf font字体在 IE 中不起作用，otf 字体
【发布时间】：2015-08-10 15:47:09
【问题描述】：

我知道这个问题被问了很多次，但在尝试之后我无法让它工作。这是我用来导入自定义字体的简单 CSS。另外，我将它与引导程序一起使用。

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

它不适用于 IE11 本身。请帮帮我。谢谢。

【问题讨论】：

你能把它放到一个jsfiddle中吗？我只能说。你确定这是你字体的正确位置吗？
根据caniuse.com/#feat=ttf IE11 部分支持TTF

标签： css twitter-bootstrap fonts font-face internet-explorer-11

【解决方案1】：

尝试对 Internet Explorer 使用 .eot 文件格式。比如：

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

【讨论】：

【解决方案2】：

Internet Explorer 使用 eot 格式（旧版）或 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 */
}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

"你需要修改字体文件的第一位。这样可以让 IE 安装字体。"可能需要一些解释如何？以及使用哪个位和哪个程序。

【解决方案4】：

如果您遇到此问题并且您的应用程序正在 IIS 上运行，请尝试在您的 web.config 中添加正确的 MIME 类型，正如 SO 用户 Martin Buberl 在this comment 中解释的那样

【讨论】：

【解决方案5】：

由于这个问题是我搜索中的第一个热门问题，所以让我提供我找到的解决方案：

Paul Irish 的 Bulletproof @font-face Syntax

或者只使用 FontSquirrel.com http://www.fontsquirrel.com/fontface/generator 上的生成器，他们还在他们创建的字体工具包中提供了“一种 CSS 语法来统治它们”。

【讨论】：