覆盖@ font-face src URL？ [英] Overriding @font-face src URL?

问题描述

我们使用FontAwesome与Bootstrap。但是，当我们尝试使用FA与我们的自定义的缩小器，它尝试从相对路径加载字体，返回404，由于缩小URL结构的设置方式。

We are using FontAwesome with Bootstrap. However, when we try to use FA with our custom minifier, it attempts to load the fonts from a relative path, which returns a 404, due to the way the minified URL structure is setup.

所以我们认为最好的解决方法是在我们的minify列表中添加一个额外的CSS文件，该文件会覆盖FontAwesome字体使用的@ font-face src网址。我们基本上只是从FontAwesome复制了@ font-face定义，并指定了绝对URL位置。

So we figured the best way to fix this was to add an additional CSS file to our minify list that would override the @font-face src URLs that FontAwesome's font uses. We basically just copied the @font-face definition from FontAwesome, and specified absolute URL locations.

但是，现在发生的是我们正确的URL加载字体尝试从FontAwesome CSS的URL（导致与以前相同的404错误）。

However, now what happens is our correct URLs load the fonts AND the originally specified URLs from the FontAwesome CSS are attempted (resulting in the same 404 errors as before).

我们做错了什么，或者真的没有办法重写@ font-face src网址，使upstream定义完全被忽略吗？

Are we doing something wrong, or is there really no way to override the @font-face src URLs so that 'upstream' definitions are totally ignored?

推荐答案

简单覆盖基本CSS类的font-family：

Simple override the font-family of the base CSS class:

.fa {
  font-family: 'FontAwesome2' !important;
}

然后，粘贴/包含并编辑字体定义：

Then, paste/include and edit the font definition:

@font-face {
  font-family: 'FontAwesome2';
  src: url('//host.domain/yourpath/fontawesome-webfont.eot?v=3.1.0');
  ...
  font-style: normal;
}

这篇关于覆盖@ font-face src URL？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！