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

Posted 2023-03-15

技术标签:

【中文标题】@font-face 图标在 Chrome-Ubuntu 中不起作用【英文标题】：@font-face for icons not working in Chrome-Ubuntu 【发布时间】：2015-08-23 05:13:07 【问题描述】：

我最近开始使用 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;

【问题讨论】：

服务器的 mime 类型是什么？请参阅答案here 了解更多信息。我已经检查过了，因为这是一个常见问题。但这通常会发出警告。此外，它们不适用于任何服务器（正如我上面所说的）。我还尝试重新排序字体中的 src url 无效。 【参考方案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"

禁用 AdBlock 解决了这个问题。

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

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

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

【讨论】：

它对我不起作用。我关闭了 AdBlock，甚至在管理扩展菜单中禁用了它，但我的图标仍然没有显示。【参考方案2】：

在 Chrome 选项/扩展中，禁用“Ubuntu 统一字体样式”。 Webfonts 显示正确。

【讨论】：

【参考方案3】：

按照@Nahuel 回答中的建议暂时关闭 AdBlock，甚至禁用扩展对我来说都不起作用。

但是，正如here 所建议的那样，我发现禁用其他扩展我已经解决了这个问题。因此，请测试一些扩展，看看其中一个是否可能导致问题