覆盖@font-face src URL？

Question

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

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

但是，现在发生的情况是我们正确的 URL 加载了字体，并且尝试了 FontAwesome CSS 中最初指定的 URL（导致与之前相同的 404 错误）。

是我们做错了什么，还是真的没有办法覆盖@font-face src URL，从而完全忽略“上游”定义？

Answer 1

简单覆盖基本 CSS 类的字体系列：

.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 的额外点击。