css - 我的字形在 Chrome 中损坏 - 为什么？

Question

我正在根据模板为客户构建一个网站。该模板使用 Bootstrap 框架，该框架对某些图像使用 Glyphicons。如果我在 Chrome 中访问 BootStrap 主页，Glyphicons 似乎工作正常。

这是不适合我的页面: http://www.laidoffsoftware.com/Contact.aspx

如果您查看“地址”部分下的图标，您应该会在电话号码旁边看到一个电话图标，在电子邮件地址旁边看到一个信封图标。在 FF、IE 或 Opera 中，这看起来不错。然而在 Chrome 中，图标被破坏了，它们是一些奇怪的符号。

我不知道为什么会发生这种情况？

任何想法都会受到赞赏。

更新:Chrome 控制台现在显示此内容:

键“width”的视口(viewport)参数值“100%”被截断为其数字前缀。

联系方式.aspx:8 资源解释为 Font，但使用 MIME 类型 font/x-woff 进行传输:“http://www.laidoffsoftware.com/font/fontawesome-webfont.woff ”。

联系方式.aspx:290 资源解释为 Font，但使用 MIME 类型 image/svg+xml 进行传输:“http://www.laidoffsoftware.com/font/IcoMoon.svg ”。

@font-face {
    font-family: 'IcoMoon';
    src: url('../font/IcoMoon.eot');
    src: url('../font/IcoMoon.eot?#iefix') format('embedded-opentype'),
    url('../font/IcoMoon.svg#IcoMoon') format('svg'),
    url('../font/IcoMoon.woff') format('woff'),
    url('../font/IcoMoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before {font-family: 'IcoMoon';
    content: attr(data-icon);
    speak: none; }

/* Use the following CSS code if you want to have a class per icon */ [class^="icon-"]:before, [class*=" icon-"]:before {font-family: 'FontAwesome', 'IcoMoon';
    font-style: normal;
    speak: none; } .icon-home:before {content: "\0021";} .icon-home-2:before {content: "\0022";} .icon-home-3:before {content: "\0023";} .icon-newspaper:before {content: "\0024";}

Answer 1

看起来这是 WebKit 中的一个错误，已在此处报告:https://bugs.webkit.org/show_bug.cgi?id=76152

此外，GlyphIcons 的创建者表示他已经意识到这个问题，并将尝试在下一个版本中使用不同的 unicode 值来解决这个错误:https://twitter.com/glyphicons/status/423426740128854016