自定义符号字体未在IE中显示

时间:2015-04-20 14:34:33

标签: html css internet-explorer font-face

以下设置

HTML

<!DOCTYPE html
SYSTEM "about:legacy-compat">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>SymbolTest</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="HandheldFriendly" content="true">
    <meta http-equiv="cleartype" content="on">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <span class="greek">μ ω Ω ≥ ⊗ ↔  ± √ ≠ ♦ ♥ ♠ ⇐ ⇒ ⊥ ♦ ⊆ ∅</span>
    </body>
</html>

CSS

@font-face {
  font-family: Symbol;
  src: url("../fonts/Symbol/symbol.eot");
  src: url("../fonts/Symbol/symbol.eot?#iefix") format("embedded-opentype"), url("../fonts/Symbol/symbol.woff2") format("woff2"), url("../fonts/Symbol/symbol.woff") format("woff"), url("../fonts/Symbol/symbol.ttf") format("truetype"), url("../fonts/Symbol/symbol#symbolregularregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
span.greek {
  font-family: Symbol;
}

与其他浏览器相比,在Internet Explorer中产生非常奇怪的结果;

Crome,Local

Chrome, Local

Chrome,服务器

Chrome, Server

FF,本地

FF, Local

FF,服务器

FF, Server

IE10,本地

IE10, Local

IE10,服务器

IE10, Server

IE11,本地

问我是否想要允许ActiveX组件 - 请注意,在后台,使用的字体是默认的Windows Symbol字体...

IE11, Local, Before

点击&#34;接受&#34;后,它会变为

IE11, Local, After

这里发生了什么?我使用FontSquirrel创建了字体并使用了&#34; 防弹&#34; @font-face语法,但它仍未按预期工作......?

1 个答案:

答案 0 :(得分:0)

经过进一步调查,问题似乎得到了解决。正如Lister 先生指出的那样,当你粘贴UTF8符号并用Symbol字体包装它们时,IE本身显然不会喜欢。

我与设计师同事检查了Symbol字体,看来IE尝试实际使用输入的字符(例如U+221A SQUARE ROOT)并将其映射到使用的字体 - {{ 1}}。

Symbol显然在代码点Symbol没有适当的字符 - 因为8730仅支持255个字符。

这意味着,IE将显示Symbol

这里有趣的是,另一个浏览器回退到默认字体并使用字符的UTF8值并正确显示。

我们现在使用的解决方案是不使用任何字体,因为整个发布过程无论如何都是UTF8,因此无需在任何地方实际使用?字体。我们只是按原样复制所有字符,并且它可以正常工作。