css - @font-face 图标在 Chrome-Ubuntu 中不起作用

Question

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

当我开始在我的网站上工作时，我注意到图标没有显示。它们在 Windows 和 Firefox(Windows 和 Ubuntu)上运行良好。

我使用 Fontastic 从 SVG 文件生成网络字体。在 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="在 Facebook 上关注我们"

禁用 AdBlock 解决了问题。

请记住，这仅适用于 Ubuntu 上的 Chrome(或任何 Linux 发行版，很可能)。

我更改了类，删除了标题属性，但它们仍然不显示。更糟糕的是，现在没有明显的原因!没有警告(即:net::ERR_BLOCKED_BY_CLIENT)，没有“X elements blocked on page”，什么都没有。所以我想我会就此联系 AdBlock。

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