7

在 Firefox 上使用图标替换字体的跨浏览器没有一些问题，目前只显示内容文本而不显示 icomoon 文本替换。代码 Sass + Magento + .htaccess 显示的源代码，任何想法或帮助将不胜感激。

网站： http ://www.phoebessecret.co.nz

已经完成 .htaccess 重写：

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
AddType application/vnd.ms-fontobject eot
AddType font/truetype ttf
AddType font/opentype otf
AddType application/x-font-woff woff

<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Origin "http://www.phoebessecret.co.nz"
Header set Access-Control-Allow-Origin "http://skin.phoebessecret.co.nz"
Header set Access-Control-Allow-Origin "http://js.phoebessecret.co.nz"
Header set Access-Control-Allow-Origin "http://media.phoebessecret.co.nz"
</IfModule>
</FilesMatch>

CSS：

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

.icon-fonts {
    font-family: 'topshops';
    font-style: normal;
    speak: none;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-weight: 400;
}

.iconsearch {
    content: "\61";
}
4

5 回答 5

4

尝试将此添加到您的 .htaccess 文件中。它应该可以解决您的问题。它修复了我的。

<FilesMatch ".(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
于 2013-08-29T09:02:05.520 回答
1

我也遇到了 icomoon 和 Firefox 的问题。您是否尝试过Paul Irish 的“防弹”@font-face语法？它与 icomoon 的输出有点不同，而且我的运气更好——从那以后就没有 FF 问题了。

@font-face {
    font-family: 'Graublau Web';
    src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
于 2013-03-22T00:43:37.850 回答
0

我遇到了同样的问题（安装了 Wordpress），icomoon 图标没有在 Firefox 中显示。Chrome、Safari、IE 运行良好。

站点启动并运行后，客户要求我在 url 中包含 www，而不仅仅是 http://。所以我更改了博客地址，但没有更改 Wordpress 地址（在 Wordpress 仪表板中）。突然间所有的Icomoon图标都不见了。将 www 添加到 Wordpress 地址后，图标又回来了。

于 2013-12-06T10:30:55.893 回答
0

您可以尝试两件事。我两个都用过，对我有用。使用 CSS 文件中的完整链接来引用 icomoon。您的 .htaccess 可能正在重写 URL。其次，正如webkub指出的那样，在 .htaccess 文件中添加以下内容。

 <FilesMatch ".(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
于 2014-07-29T08:35:56.327 回答
0

如果您正在运行 IIS，则需要修改 web.config 并可能添加 httpProtocol 部分，如下所示：

<?xml version="1.0" encoding="utf-8"?>
  <configuration>
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Origin" value="*" />
       </customHeaders>
     </httpProtocol>
   </system.webServer>
  </configuration>
于 2014-12-03T15:48:02.293 回答