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

Posted 2023-03-15

【中文标题】我的字形在 Chrome 中坏了 - 为啥？

【英文标题】：My glyphicons are broken in Chrome - why?我的字形在 Chrome 中坏了 - 为什么？

【发布时间】：2013-01-21 05:44:17

【问题描述】：

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

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

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

我不知道为什么会这样？

感谢任何想法。

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

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

联系人.aspx:8 资源解释为字体，但使用 MIME 类型字体/x-woff 传输：“http://www.laidoffsoftware.com/font/fontawesome-webfont.woff”。

联系人.aspx:290 资源解释为字体，但使用 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";

【问题讨论】：

应该是手机。看这张图，没错i.imgur.com/M3hlvYs.jpg

【参考方案1】：

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

@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"]

【讨论】：

拯救了我的一天！更进一步： "web_accessible_resources": ["fonts/*" ] 在清单 json 中添加上述内容！

【参考方案2】：

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

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

【参考方案3】：

我想我已经找到了答案，尽管我不是 100% 确定为什么会这样。看上面的CSS代码，我做了这个改动...

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

【参考方案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。

【讨论】：

谢谢。这是一个很好的发现，出于某种原因，我没有将其视为浏览器中的错误。遗憾的是，它并没有解决问题。

这使用了一个名为 icomoon 的库