覆盖@ font-face src URL？

Question

我们正在使用FontAwesome和Bootstrap.但是,当我们尝试将FA与我们的自定义minifier一起使用时,它会尝试从相对路径加载字体,这会返回404,这是由于设置了缩小的URL结构的方式.

因此我们认为解决此问题的最佳方法是在我们的minify列表中添加一个额外的CSS文件,该文件将覆盖FontAwesome字体使用的@ font-face src URL.我们基本上只是从FontAwesome复制了@ font-face定义,并指定了绝对URL位置.

但是,现在发生的是我们正确的URL加载字体并尝试从FontAwesome CSS中最初指定的URL(导致与以前相同的404错误).

我们做错了什么,或者真的没有办法覆盖@ font-face src URL,以便完全忽略'upstream'定义？

Answer 1

简单地覆盖基类CSS类的font-family:

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

然后,粘贴/包含并编辑字体定义:

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

Answer 2

更新：下面的“解决方案”实际上并没有起作用......实际上我们确实有一个拼写错误，但在随后的测试中，这仍然不是根本原因，我们仍然面临这个问题。

解决方案是在覆盖 @font-face 时要非常小心，确保提供原始 @font-face 中使用的所有相同格式。否则，浏览器会将其视为不同的定义，并将尝试下载两者中引用的文件，而不是覆盖它。

所以这里是FontAwesome的CSS中的定义，首先引用它。

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.1.0');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), 
    url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'), 
    url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), 
    url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
  font-weight: normal;
  font-style: normal;
}

当我们尝试覆盖时，我们不小心删除了“format('svg')”定义：

@font-face {
  font-family: 'FontAwesome';
  src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?v=3.0.1');
  src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

添加format('truetype')定义后，我们就不再遇到导致 404 的额外点击。