2

我正在使用Metro UI CSS，但图标显示为控制字符。我已将 charset=utf-8" 添加到 head 部分并将 AddDefaultCharset utf-8 添加到 httpd.conf。问题仍然存在。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

请帮忙。提前致谢。

4

5 回答 5

1

我遇到过同样的问题。原来我忘了将字体文件复制到字体目录。 metro-bootstrap.css参考字体：

@font-face {
  font-family: 'iconFont';
  src: url('../fonts/iconFont.eot');
  src: url('../fonts/iconFont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconFont.woff') format('woff'), url('../fonts/iconFont.ttf') format('truetype'), url('../fonts/iconFont.svg#iconFont') format('svg');
  font-weight: normal;
  font-style: normal;
}

因此需要将它们放在相对于metro-bootstrap.css. 如果你下载Metro-UI-CSS-master.zip，字体可以在fonts目录中找到。

于 2014-03-01T14:43:14.437 回答
1

解决方案：

  1. 找到您的字体目录并允许权限。（*.eot；*.woff；*.ttf；*.svg）。并记下位置。
  2. 编辑你的 metro-icons.css，并放置正确的字体目录路径。（我使用浏览器检查来检查我的路径是否正确）
  3. 刷新您的浏览器。
于 2017-03-16T07:46:11.103 回答
0

如果你使用<!DOCTYPE html>作为你的文档类型，我建议你试试这个。

<meta charset="utf-8">

代替

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

我希望这能解决你的问题。

于 2013-08-08T06:03:11.933 回答
0

您既需要外部 css 集（metro-bootstrap.css）也需要 class="metro"... 这是一个工作副本：http: //jsfiddle.net/67T6c/

<link href="css/metro-bootstrap.css" rel="stylesheet">

<div class="metro">
<i class="icon-home"></i>
</div>

另请注意，这适用于 Chrome。但是，在 IE 中，您可能会受到美妙的 cross-origin-web-font 块的限制。有关详细信息，请参阅此内容：IE9 blocks download of cross-origin web font

于 2013-12-17T22:28:59.757 回答
0

您还必须确保您的 Web 服务器不会阻止下载带有字体所需扩展名的文件。它们是：eot；ttf; 哇；svg

我有同样的问题，我无法以任何方式解决图标的问题。后来我发现问题是由于用于开发的Web服务器，Delphi DataSnap单机模式，因为过滤了这些扩展名，所以这些文件没有返回到浏览器。

对于 Delphi DataSnap，解决方案是：

  • 去WebModuleUnit
  • 选择WebFileDispatcher1
  • Dbl 单击WebFileExtensions属性并添加所需的文件扩展名。
于 2014-08-29T14:02:12.797 回答