@ font-face用于在Chrome-Ubuntu中无效的图标

Question

我最近开始使用Ubuntu。我从Google网站上提供的安装程序中安装了Chrome。

当我开始在我的网站上工作时，我注意到图标没有显示。它们在Windows和Firefox（Windows和Ubuntu）上都能正常工作。

我使用Fontastic从SVG文件生成webfonts。在Windows上，我使用了WAMP，它们运行良好。现在我正在使用XAMPP。这可能无关，因为它们也不能在远程服务器上运行。我在控制台上没有任何错误或警告，他们根本就没有显示。

这是一个例子。我有@font-face：

@charset "UTF-8";

@font-face {
  font-family: "site-icons";
  src:url("../webfonts/site-icons.eot");
  src:url("../webfonts/site-icons.eot?#iefix") format("embedded-opentype"),
    url("../webfonts/site-icons.woff") format("woff"),
    url("../webfonts/site-icons.ttf") format("truetype"),
    url("../webfonts/site-icons.svg#site-icons") format("svg");
  font-weight: normal;
  font-style: normal;

}

这是Fontastic提供的代码。当我在开发人员工具中查看Chrome的网络标签时，我看到了这样的回复：

HTTP/1.1 200 OK
Date: Mon, 08 Jun 2015 15:54:08 GMT
Server: Apache/2.4.12 (Unix) OpenSSL/1.0.1m PHP/5.5.24 mod_perl/2.0.8-dev Perl/v5.16.3
Last-Modified: Sun, 15 Jun 2014 02:14:32 GMT
ETag: "adc-4fbd6789d7200"
Accept-Ranges: bytes
Content-Length: 2780
Keep-Alive: timeout=5, max=95
Connection: Keep-Alive

如果我进入预览标签，我看到字体就好了！

那么他们为什么不在网站上展示呢？这只发生在Chrome / Ubuntu中。

奇怪的是，如果我去Font Awesome，我会看到图标，它们工作正常： http://fortawesome.github.io/Font-Awesome/

这是他们的代码

/*!
 *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Answer 1

好吧，我会被诅咒。这是AdBlock。 AdBlock通常会显示一个小徽章，显示每个页面上有多少元素被阻止。它没有显示任何东西！

直到现在我还没有注意到这些样式被插入：

::content a[title="Connect with us on Twitter"], ::content 
a[title="Connect with us on Youtube"], ::content a[title="Facebook"], 
::content a[title="Fan us on Facebook"], ::content a[title="Follow Me 
on Pinterest"], ::content a[title="Follow Us on Facebook"], ::content 
a[title="Follow Us on Google+"], ::content a[title="Follow Us on 
Pinterest"], ::content a[title="Follow Us on Youtube"], ::content 
a[title="Follow me on Facebook"], ::content a[title="Follow on Google 
Plus"], ::content a[title="Follow our Boards on Pinterest"], ::content 
a[title="Follow us on Facebook!"], ::content a[title="Follow us on 
Google Plus"], ::content a[title="Follow us on Google"], ::content 
a[title="Follow us on Google+"], ::content a[title="Follow us on 
Houzz"], ::content a[title="Follow us on Instagram"], ::content 
a[title="Follow us on Instagram."], ::content a[title="Follow us on 
Linked In"] {
  display: none;
}

::content .icon-circle-instagram, ::content .icon-circle-tumblr, 
::content .icon-circle-twitter, ::content .icon-circle-youtube, 
::content .icon-connect, ::content .icon-delicious, ::content .icon-
digg, ::content .icon-facebook, ::content .icon-facebook-alt, ::content 
.icon-facebook-box, ::content .icon-facebook-circle, ::content .icon-
facebook-circled, ::content .icon-facebook-encircled, ::content .icon-
facebook-round, ::content .icon-facebook-sharing, ::content .icon-
facebook-sign, ::content .icon-facebook-square, ::content .icon-
facebook-squared, ::content .icon-facebook-sticky, ::content .icon-
facebook16 {
  display: none;
}

我认为他们来自AdBlock。我使用过课程.icon和.icon-facebook，.icon-twitter等。而且选择器也会将a与title="Facebook"或title="Follow us on Facebook" <匹配/ p>

禁用AdBlock解决了这个问题。

请注意，这只适用于Ubuntu上的Chrome（或任何Linux发行版，最有可能）。

我更改了类，删除了标题属性，仍然没有显示。现在更糟糕的是，为什么没有明显的理由！没有警告（即：net::ERR_BLOCKED_BY_CLIENT），没有“页面上的X元素被阻止”，没有任何内容。所以我想我会就此事与AdBlock联系。

• 编辑 - 对此负责的AdBlock列表是： Fanboy的社交阻止列表。

Answer 2

按照@Nahuel答案中的建议暂时关闭AdBlock，甚至禁用该扩展程序也无法完成我的工作。

但是，正如建议here一样，我发现禁用其他扩展程序已经解决了该问题。因此，请测试一些扩展，看看其中是否可能引起了问题