仅在 Internet Explorer 中使用不同的字体答案

【问题标题】：Use different font in internet explorer only仅在 Internet Explorer 中使用不同的字体
【发布时间】：2014-06-12 06:55:18
【问题描述】：

我在 Internet Explorer 中使用自定义面孔时遇到了非常严重的问题。

我现在使用一种特定的字体，带有 font-face，它在现代浏览器中运行良好，但我无法让它在 IE 中运行。

我在Chrome、Firefox等中使用字体的方法如下：

font-family: xy;
src: url(fonts/xy.otf);

}

有没有办法让 IE 使用另一种字体？

font-family: xy, iefont, sans; 不起作用，因为在很多 css 和地方都指定了 font-typed，

* {font-family: xy, iefont, sans !important} 无法正常工作，因为它丢弃了前面指定的“FontAwesome”系列。

什么是最简单的格式化每个文本，但仅适用于 IE？

【问题讨论】：

自定义字体文件在IE上渲染有些问题，如果你用谷歌字体，相信你不会看到这样的问题。
字面答案：add an IE-specific rule。查看其他答案，这不是最好的方法。

标签： css internet-explorer font-family

【解决方案1】：

Internet Explorer 使用 .eot 字体文件。您甚至可以在 IE8 中完成这项工作。您需要将您的 otf 字体转换为 woff、eot、...

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

您可以使用http://www.fontsquirrel.com/ 来生成这些文件。

【讨论】：

感谢您的回复，我使用在线转换器将我的 otf 文件转换为 eot，现在我的字体代码如下所示：`@font-face { font-family: xy; src：url（字体/xy.otf）； src: url('fonts/xy.eot'); /* IE9 兼容模式 / src: url('fonts/xy.eot?#iefix') format('embedded-opentype'); / IE6-IE8 */ } ` 仍然没有发生 ie (i11, win8)
也许 IE 11 有错误？

【解决方案2】：

您可以在 IE 中使用条件注释。

<!--[if IE]>
<style>
.myfontclass {
//your IE specific font here
}
</style>
<![endif]-->

希望有帮助！

【讨论】：

不，不幸的是 ie 条件已在 ie 9,11 中删除，并带有以下声明：不需要条件注释。不需要“[如果 IE 10]”，因为页面在所有现代浏览器中呈现（大部分）相同。
@user3576148 好的，我不知道这一点。感谢您指出这一点。

【解决方案3】：

IE 特定的 CSS

对于浏览器特定的 css 文件，我会推荐：

简单的解决方案，只需使用这个 JS 库，您就可以轻松地为每个浏览器/操作系统组合应用样式：

BrowserClass.js

这样，您将在 body 标记上获得一个类名，其中包含当前名称和浏览器版本以及使用的操作系统。

包含文件后：

<script src="js/browserclass.js"></script>

例如在带有最新 ie 的 Windows 8.1 上，您将看到：

<body class="ie ie11 win desktop">

在您的样式文件中，您可以参考：（.sass 样式）

body.ie
  +declare-font-face('Open Sans Light', 'OpenSans-Light-webfont', 200)

注意： IE 中的条件注释仅适用于 IE9！

SASS 混合

或者如果你使用的是 SASS，这里有一个很好的 mixin：

// ---------------------
// Font Face Mixin
// ---------------------
=declare-font-face($font-family, $font-filename, $font-weight: normal, $font-style: normal, $font-stretch: normal)
  @font-face
    font-family: #{$font-family}
    src: url("../fonts/#{$font-filename}.eot")
    src: url("../fonts/#{$font-filename}.eot?#iefix") format("embedded-opentype"), url("../fonts/#{$font-filename}.svg##{$font-family}") format("svg"), url("../fonts/#{$font-filename}.woff") format("woff"), url("../fonts/#{$font-filename}.ttf") format("truetype")
    font-weight: $font-weight
    font-style: $font-style
    font-stretch: $font-stretch

用法：

+declare-font-face('Open Sans Light', 'OpenSans-Light-webfont', 200)

【讨论】：