仅在 Internet Explorer 中使用不同的字体
Posted
技术标签:
【中文标题】仅在 Internet Explorer 中使用不同的字体【英文标题】：Use different font in internet explorer only 【发布时间】：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。查看其他答案，这不是最好的方法。 【参考方案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)
【讨论】：
以上是关于仅在 Internet Explorer 中使用不同的字体的主要内容，如果未能解决你的问题，请参考以下文章
GWT - 仅在 Internet Explorer 中设置 document.domain 时出现“拒绝访问”JavaScript 错误
Internet Explorer 11 和 jQuery UI
输入在 Internet Explorer 8 中的 textarea 中不起作用