2

所以我一直在使用 WeLoveIconFonts API 调用来@import 他们托管的 Entypo 图标字体版本，但是他们最近有一些停机时间，如果我们可以自己托管文件，我会感觉更舒服。

我下载了从这部分 CSS 调用的文件

@import url(http://weloveiconfonts.com/api/?family=entypo);

将其保存为 CSS 文件并重新上传到我们自己的服务器

新的@import url 现在是

@import url('http://myserver.com/entypo.css');

在这个文件中是对各个字体文件的调用（URL 如下所示）

@charset 'UTF-8';
@font-face {
font-family: 'entypo';
font-style: 'normal';
font-weight: 'normal';
src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot');
src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot?#iefix') format('eot'), 
url('http://weloveiconfonts.com/api/fonts/entypo/entypo.woff') format('woff'), 
url('http://weloveiconfonts.com/api/fonts/entypo/entypo.ttf') format('truetype'), 
url('http://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo') format('svg');
}

我还下载并重新上传到我的服务器并相应地更正了路径，即

src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot');

变成

src: url('http://myserver.com/fonts/entypo/entypo.eot');

一切似乎都可以从 NET 选项卡（状态为“200 OK”）中正常加载，包括所有字体和新样式表，但是似乎没有在所需项目上设置字体，它只是设置了跨度的样式网站的默认字体（Proxima Nova）并显示带有小字符的框。当我签入萤火虫时

font-family: 'entypo';

显示为灰色并显示 proxima。

有谁知道我哪里出错了？我的怀疑是原始的@import 文件并不意味着被称为 CSS，但是它下载的文件的内容是 CSS 规则。

任何帮助将非常感激。

4

2 回答 2

0

If you want to self-host Entypo, you'll probably have better results downloading the necessary files from http://www.entypo.com/ , rather than trying to extract them individually from the hosting service.

The download package at the font's own website will give you the files you need, and CSS already set up for hosting the font locally.

于 2014-01-04T20:12:41.143 回答
0

如果这只发生在 Firefox 下，那么您没有正确设置“Allowed Origin”标题并且 Firefox 正在阻止它：Access-Control-Allow-Origin。

http://red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default/

也可能是 MIME 类型设置不正确。

http://somethinginteractive.com/blog/2012/06/04/proper-mime-types-for-embedded-font-face-fonts/

于 2014-04-02T08:41:05.710 回答