自定义符号字体未在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，因此无需在任何地方实际使用?字体。我们只是按原样复制所有字符，并且它可以正常工作。

相关问题
最新问题