Question

我正在基于模板为客户构建网站。该模板使用Bootstrap框架，该框架将Glyphicons用于某些图像。如果我转到Chrome中的BootStrap主页，Glyphicons似乎工作正常。

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

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

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

任何想法都表示赞赏。

更新：Chrome控制台现在正在显示：

视口参数值＆＃34; 100％＆＃34;对于关键＆＃34;宽度＆＃34;被截断为数字前缀。

Contact.aspx：8 资源解释为Font但使用MIME类型font / x-woff传输：＆＃34; http://www.laidoffsoftware.com/font/fontawesome-webfont.woff＆＃34;。

Contact.aspx：290 资源解释为Font但使用MIME类型image / svg + xml传输：＆＃34; http://www.laidoffsoftware.com/font/IcoMoon.svg＆＃34;。

@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

我认为找到答案，虽然我不是百分之百确定为什么这样做。看到上面的CSS代码，我做了这个改变......

url('../font/IcoMoon.svg#IcoMoon') format('opentype'),

Answer 2

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

另外，GlyphIcons的创建者说他知道这个问题，并会尝试在下一个版本中使用不同的unicode值来解决这个问题：https://twitter.com/glyphicons/status/423426740128854016

Answer 3

您必须设置相对于扩展路径的字体网址。所以你需要改变这个

@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; }

到

@font-face {
font-family: 'IcoMoon';
src: url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.eot');
src: url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.svg#IcoMoon') format('svg'),
url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.woff') format('woff'),
url('chrome-extension://__MSG_@@extension_id__/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; }chrome-extension://__MSG_@@extension_id__/

并在清单文件中包含css，如下所示： “css”：[“/ css / mystyle.css”]

Answer 4

查看控制台。您在所有页面上都发生了一些错误： Viewport argument value "no;" for key "user-scalable" not recognized. Content ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated.

首先解决这个问题，然后看看这是否解决了问题，如果没有 - 挖掘铲斗

<强>更新

我刚刚检查过的另一件事：Twitter Bootstrap不提供类图标电话的默认字形：http://twitter.github.com/bootstrap/base-css.html#icons

您可以使用自己创建的或从其他来源获取的自定义图标，但您需要为其编写css。

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

4 个答案: