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

Question

我知道有人多次询问过这个问题，但在尝试之后我还是无法正常工作。这是我用来导入自定义字体的简单 CSS。另外，我将它与 bootstrap.

一起使用

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

它在 IE11 本身中不起作用。请帮帮我。谢谢。

Answer 1

尝试使用 Internet Explorer 的 .eot 文件格式。类似于：

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

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

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.config 中添加正确的 MIME 类型，正如 SO 用户 Martin Buberl 在 this comment

Answer 5

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

Paul Irish 的 Bulletproof @font-face Syntax

或者只使用 FontSquirrel.com 处的生成器 http://www.fontsquirrel.com/fontface/generator 他们还在他们创建的字体包中提供了 "one CSS syntax to rule them all"。

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

Font-face not working in IE, otf font

css

fonts

font-face

twitter-bootstrap

internet-explorer-11