【发布时间】：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 无效。
标签： css google-chrome ubuntu fonts